Как подобрать широкое изображение в бутстрапе?

Question

У меня есть строка из четырех столбцов (col-md-3). Каждый столбец имеет эскиз ширины 220px и height-360px. Как я могу заполнить/закрыть эскиз с изображениями разного разрешения (например, 1920X1080px или 2480 x 3508 px)?

Я попытался это:

 <div class="thumbnail"> 
      <img src="images/highres.jpg" alt="Nosmoking image"> 

     </div><!----End of thumbnail--> 

    </div> 

</div> 

CSS:

  img{ 
     object-fit: cover; 
    } 

    .thumbnail{ 
     height: 360px; 
     width: 220px; 
     overflow:hidden; 
    } 

Я использовал образ 1920X1080px (широкий), и это просто заполнение половины из thumbnail.что я хочу, чтобы сохранить соотношение сторон и накрыть эскиз. Какое простейшее решение?

Answer 1

Если вы правильно поняли, есть некоторые решения, вы можете добавить разные классы к каждому .thumbnail и добавить фоновое изображение для каждого .thumbnail, используя CSS, но пока и для вашего текущего кода вы можете добавить этот CSS и разрешить Ваша проблема:

.thumbnail > img{ 
    width:100%; 
    height:100%; 
} 

EDIT:

Если вы хотите сохранить пропорции, я предлагаю добавление подходящих классов в .thumbnail HTML элемент, а затем добавить изображение с помощью CSS фона.

себе это:

HTML:

<div class="thumbnail thumbnail-1"></div> 
<div class="thumbnail thumbnail-3"></div> 
<div class="thumbnail thumbnail-4"></div> 

CSS:

.thumbnail { 
    background-size:cover; 
    backgrond-repeat:no-repeat; 
} 

.thumbnail-1{ 
    background-image:url("image1.jpg") 
} 

.thumbnail-2{ 
    background-image:url("image2.jpg") 
} 

.thumbnail-3{ 
    background-image:url("image3.jpg") 
}