Bagaimanakah CSS Boleh Menjadikan Semua Imej Sesuai dengan 100x100 Pixel Square?

Mencapai Keseragaman Antara Imej Pelbagai Dimensi

Bayangkan membina dinding imej yang dihiasi dengan gambar produk. Cabaran timbul apabila imej ini datang dalam pelbagai saiz. Bagaimanakah seseorang boleh menggunakan CSS untuk memberikan mereka penampilan yang harmoni, dengan setiap imej menghiasi kanvas 100 x 100 piksel?

Pertimbangkan untuk membayangkan div yang dihiasi dengan dimensi 100 piksel yang dikehendaki untuk kedua-dua ketinggian dan lebar. Persoalannya masih ada: bagaimanakah div ini boleh digunakan dengan baik untuk menampung imej dengan perkadaran yang berbeza-beza?

Penyelesaian Semasa (Optimal untuk Penyemak Imbas Moden)

< 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;

Salin selepas log masuk

}

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