generieren ein Quadrat ein Bild unabhängig vom Bildverhältnis

Question

ich für eine CSS einzige Lösung suchen eine quadratische Miniatur zu erzeugen unabhängig ein Bildverhältnis:

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

Das obige Beispiel eine quadratische Miniatur schaffen nur Wenn es sich bei dem Bild um eine Hochformatansicht handelt, werden Bilder in Querformatansicht nicht die gesamte Höhe des Miniaturbildes abdecken.

Gibt es eine CSS-Lösung (neben der Einstellung als Hintergrundbild), um dies zu tun?

Answer 1

Der einzige Weg (ich denke), dies ohne die übliche background-image/background-size Methode zu tun, ist object-fit zu verwenden. Obwohl es nicht in IE funktioniert:

.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