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

img {

width: 250px;

height: 250px;

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

}

LP, WEBの関連記事
  • サイト作成のポイント
  • ページ制作で使えそうなカウントダウンタイマーのテンプレート
  • Chart.jsで簡単にレーダーチャートを作る方法
  • LPの極意
  • フリーフォントをサーバーにアップロードしてWebフォントとして使う方法
  • Photoshopで画像の中のフォントを検索する方法
おすすめの記事
WEB
修正依頼に校正記号が使われているケースがあります。 謎の赤文字記号がたくさんあると、何を意味しているのか迷います。校正記号がわかりやすくまと...
LP
この投稿はパスワードで保護されているため抜粋文はありません。...
WEB
画像編集はphotoshop上で編集が一般的ですが、CSSでも編集することができます。 第1弾に引き続き、様々なTipsをご紹介いたします。...
バナー
各バナーサイズの掲載箇所をまとめました。 PC Topページ TOPページ右側はブランドパネル枠になります。(略称:ブラパネ)【掲載サイズ】...