画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしも用意されている画像のサイズが同じとは限りません。
そんな時は object-fit: cover; でトリミングすると楽です!画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

img {

width: 250px;

height: 250px;

object-fit: cover; /*この一行を追加するだけ! */

}

LP, WEBの関連記事
  • サイト作成のポイント
  • ページ制作で使えそうなカウントダウンタイマーのテンプレート
  • Chart.jsで簡単にレーダーチャートを作る方法
  • LPの極意
  • フリーフォントをサーバーにアップロードしてWebフォントとして使う方法
  • Photoshopで画像の中のフォントを検索する方法
おすすめの記事
LP
レスポンシブではなく、PCページとSPページで別の表示をさせたい、別のタグを入れたいなど同じ商品でありながら別の見せ方をしたい時があります。...
LP
この投稿はパスワードで保護されているため抜粋文はありません。...