WEB Tips デザイン・コーディング

CSSだけで画像をトリミングする object-fit,object-positon

2019-07-31

本記事にはプロモーションが含まれています。

CSSだけで画像をトリミングする object-fit,object-positon

ウェブページで使う画像を特定の位置やサイズでトリミングしたい時、CSSだけで画像をトリミングすると、画像のトリミング作業を効率化することができます。

CSSだけで画像をトリミングするメリット

  • 画像編集ソフトを使わなくてもCSSだけで画像のサイズや位置を調整できる
  • 画像の品質を損なわずにトリミングできる
  • アスペクト比を自由に変更できる

CSSだけで画像をトリミングするメリットは、画像をトリミングする際に画像を再保存する必要がないことです。

画像をトリミングするには、通常、画像編集ソフトを使用して画像をトリミングし、再保存する必要があります。しかし、CSSだけで画像をトリミングすれば、画像を再保存することなく、画像をトリミングすることができます。

また、画像を再保存する必要がないため、画像の品質を維持することができます。

これは、画像の数が多かったり、サイズがバラバラだったりする場合にとても便利です。

CSSだけで画像をトリミングするobject-fitプロパティ

object-fitプロパティを使えば、縦横比を維持したまま、画像のサイズや形を指定した要素に合わせて変えることができます。

横長の写真を200px×200pxの正方形に画像をトリミングしたい場合、以下のようにobject-fitプロパティを指定します。

img {
width: 200px;
height: 200px;
object-fit: cover;
}

画像をどのようにはめ込むか、object-fitの値を指定します。

fill画像の縦横比を無視して、要素にぴったり合わせます。画像が歪んだり伸びたりする可能性があります。
contain画像の縦横比を保持して、要素の中に収まるようにします。画像が小さくなったり余白ができたりする可能性があります。
cover画像の縦横比を保持して、要素を埋め尽くすようにします。画像が大きくなったり切れたりする可能性があります。
none画像のサイズや形を変えません。要素からはみ出す可能性があります。
scale-downfillとnoneのうち、小さい方に合わせます。
object-fitの値

object-fitプロパティの適用例

See the Pen object-fit:fill by mixtaro (@mixtaro) on CodePen.

object-fit: cover;が指定したオブジェクトのサイズに合わせて縦横比を維持したままトリミングできます。この場合、画像の中央を基準にしてトリミングされます。

トリミングの位置を右下や左上を基準にしたい場合はobject-positionを使います。

トリミングの位置を調整する object-position

また、object-positionというプロパティを使って、トリミングする位置を変えることもできます。object-positionは、左右と上下の位置を指定できます。例えば、以下のようなコードで、画像の右下からトリミングできます。

img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: right bottom;
}

See the Pen position by mixtaro (@mixtaro) on CodePen.

object-positionの指定例

object-position: 50% 50%; /* 初期値 */
object-position: right bottom; /* 右・下部 */
object-position: center top; /* 左右中央・上部 */
object-position: 10px; /* 左から10pxの位置から表示 */

以上のように、CSSだけで画像をトリミングするメリットはたくさんあります。

object-fitとobject-positionを使って、自由に画像のサイズや形を変えてみましょう!

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-