Wie kann CSS dafür sorgen, dass alle Bilder auf ein 100x100 Pixel großes Quadrat passen?

Einheitlichkeit zwischen Bildern unterschiedlicher Größe erreichen

Stellen Sie sich den Aufbau einer Bildwand vor, die mit Produktfotos geschmückt ist. Die Herausforderung entsteht, wenn diese Bilder in unzähligen Größen vorliegen. Wie kann man CSS nutzen, um ihnen ein harmonisches Erscheinungsbild zu verleihen, wobei jedes Bild eine 100 x 100 Pixel große Leinwand schmückt?

Stellen Sie sich ein Div vor, das mit den gewünschten Abmessungen von 100 Pixeln für Höhe und Breite geschmückt ist. Es bleibt die Frage: Wie kann dieses Div geschickt genutzt werden, um Bilder unterschiedlicher Proportionen unterzubringen?

Aktuelle Lösung (optimal für moderne Browser)

< div class="snippet-code">

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">float: left;
width:  100px;
height: 100px;
object-fit: cover;

Nach dem Login kopieren

}

<img src="http://i.imgur.com /37w80TG.jpg"><br><img src="http://i.imgur.com/B1MCOtx.jpg">