ブックマーク / web-camp.io (1)

  • CSSで画像をトリミングする方法とは?object-fit以外のプロパティも紹介 - WEBCAMP MEDIA

    object-fitを使う 最初は、object-fitプロパティを紹介します。 object-fitは、要素のサイズを指定することで、サイズに合わせてトリミングすることができるプロパティです。 以下のように記述します。 img { width: 250px; height: 250px; object-fit: cover; } このコードでは、縦横比を維持したまま、ボックスの中が画像で埋まるようにリサイズされます。 横幅と高さのうち、小さい方のサイズが、指定した250pxに合わせられます。 はみ出した部分はトリミングされ、表示されません。 object-fitで使用できる値は、他にもあります。それぞれ解説していきましょう。 fill(初期値) fillは、ボックス内を満たすように画像の縦横がリサイズされます。 何も指定していない場合は、この初期値と同じ挙動になります。 cover 上記

    CSSで画像をトリミングする方法とは?object-fit以外のプロパティも紹介 - WEBCAMP MEDIA
  • 1