CSS ではどのようにしてすべての画像を 100x100 ピクセルの正方形に収めることができるのでしょうか?

さまざまなサイズの画像間での均一性の達成

製品の写真で飾られたイメージ ウォールを構築することを想像してください。これらの画像のサイズが無数にある場合、課題が生じます。 CSS を利用して、各画像が 100 x 100 ピクセルのキャンバスを飾り、調和のとれた外観を与えるにはどうすればよいでしょうか?

高さと幅の両方が 100 ピクセルの希望のサイズで装飾された div を想像してみてください。疑問は残ります。さまざまな比率の画像に対応するために、この div をどのように適切に利用できるでしょうか?

現在のソリューション (最新のブラウザに最適)

<ディビジョンclass="snippet-code">

<pre class="brush:php;toolbar:false">float: left;
width:  100px;
height: 100px;
object-fit: cover;

}

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