Wie kann ich ein Bild mit beliebiger Größe strecken/verkleinern, damit es am besten in ein Quadrat passt, nur mit CSS/HTML?

Question

Ich habe einen perfekt quadratischen DIV - 500 x 500px.

Ich werde Bilder von unbekannter Größe in diesem DIV anzeigen ... einige der Bilder sind horizontal und einige sind vertikal; einige sind größer als 500px groß oder breit, einige sind kleiner als 500px groß oder breit. Ich kontrolliere nicht die Bildgröße.

Wie kann ich jedes Bild, das ich in das DIV platziere, erweitern oder reduzieren, um die Box am besten zu füllen? Mein Ziel ist es, dass eine Achse des Bildes immer 500px groß ist und die andere Achse angepasst wird. (Dies bedeutet, dass, wenn das Bild nicht perfekt quadratisch ist, wird immer Platz auf beiden Seiten des Bildes für vertikale Bilder oder über und unter dem Bild für horizontale Bilder. Das ist in Ordnung.)

Ich weiß, ich kann Verwenden Sie JS oder etwas Serverseitiges, um die Bildgrößen zu berechnen und neue Dimensionen auf diese Weise zu berechnen, aber ich suche eine CSS-Lösung. Können Flexboxen dies erreichen? Hier

Answer 1

Da die CSS object-fit Eigenschaft ist immer noch weit verbreitet unterstützt beachten Sie, und Sie haben einen festen Behälter, warum nicht background-image:.../background-size:contain

.image { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    border: 1px solid red;     /* to mark each box in this sample */ 
 
} 
 

 
.nr1 { 
 
    background-image: url(http://lorempixel.com/400/600/animals/1); 
 
} 
 
.nr2 { 
 
    background-image: url(http://lorempixel.com/600/400/animals/3); 
 
}

<div class="image nr1"> 
 
</div> 
 

 
<div class="image nr2"> 
 
</div>

Answer 2

ist die Lösung: Siehe im Ergebnis http://codepen.io/anon/pen/MyBXKZ

HTML

<div class="image-wrapper"> 
<div class="image-container"> 
    <img src="http//images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="Sample image"> 
</div> 

CSS

.image-wrapper { 
    background-color: #fff; 
    -webkit-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    -moz-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    height: 500px; 
    width: 500px; 
} 

.image-container { 
    text-align: center; 
    line-height: 500px; 
    height: 100%; 
} 

.image-container img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    vertical-align: middle; 
}