【CSS】サイズバラバラの画像を揃えたい : 一萬人の麓路()ブログに画像を貼るとき、大きさを合わせたいなーということが、よくあります。 それが簡単にできてしまうCSSがあると聞いて、しらべてじっけんしてみました。 誰かが言った。 大きさやタテヨコの比率がまちまちの画像 object-fit と object-position 効かせたい画像要素に、(必要なら)適当なクラス名をつけます。 ここではofiという名前にしました。 CSSとHTMLは以下の通り。 img.ofi{ width: 27%; height: 180px; margin: 12px; -o-object-fit: cover; object-fit: cover; } <img class="ofi" src="画像URL" alt="画像の説明"> width、height、marginなど通常のプロパティはデザインに合せて適当に。 object-fit: coverで、バラバ
