Сформировать квадрат миниатюрного изображение независимо от формата изображения

Question

Я ищу для CSS единственным решения для создания квадратной миниатюры независимо отношение изображения:

.thumbnail { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 
img { 
    width: 100%; 
    height: auto; 
} 

В приведенной выше примере будет создавать только квадратную миниатюру если изображение представляет собой портретный вид, изображения в альбомной ориентации не будут покрывать всю высоту миниатюры.

Есть ли решение только для CSS (, кроме того, чтобы установить его как фоновое изображение)?

Answer 1

Единственный способ (я думаю) сделать это без обычного метода background-image/background-size - использовать object-fit. Хотя это не будет работать в IE:

.thumbnail { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
/* for demo only...*/ 
 
div { 
 
    margin-bottom: 15px; 
 
} 
 
.noscale { 
 
    width: auto; 
 
    height: auto; 
 
}

<div class="thumbnail"> 
 
    <img src="//placekitten.com/200/300"> 
 
</div> 
 

 
<div class="thumbnail"> 
 
    <img src="//placekitten.com/300/200"> 
 
</div> 
 

 
<h4> 
 
Images for reference: 
 
</h4> 
 
<img src="//placekitten.com/200/300" class="noscale"> 
 
<img src="//placekitten.com/300/200" class="noscale">

Browser Support #object-fit