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

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

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

高さと幅の両方が 100 ピクセルの希望のサイズで装飾された div を想像してみてください。疑問は残ります。さまざまな比率の画像に対応するために、この 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;

ログイン後にコピー

}

<img src="http://i.imgur.com /37w80TG.jpg"><br><img  src="/static/imghw/default1.png"  data-src="http://i.imgur.com/B1MCOtx.jpg"  class="lazy">