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

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

2019-07-31

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

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

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

ウェブページで使う画像を特定の位置やサイズでトリミングしたい時、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を使って、自由に画像のサイズや形を変えてみましょう!

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

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