新潟県妙高市を拠点とする、ホームページと広告の相談相手

MENU [+]閉じる [×]
CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)

ホームページのコンテンツを更新するとき、使用する画像のタテヨコ比が一定でない場合もあるでしょう。

制作会社がPhotoshopなどを用いて画像のタテヨコ比を整えることができれば良いかもしれませんが、お客様にコンテンツの更新を行なっていただく場合、つどサイズ調整していただくのも大変です(^^;)

そこで今回は使用する画像のタテヨコ比が一定でない場合に、画像を指定サイズに収めて余りをトリミングする方法についてご紹介します(⌒▽⌒)

この記事の目次

【結論】指定サイズのトリミングはimgタグに[object-fit:cover;]を追加する!

さっそく結論です!

CSSファイルの、トリミングしたい画像のタグに[object-fit:cover;]を追加してみてください。

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

そうした結果がこちら!

夏の夜に現れた黒髪の女性かな?

もう1枚!!

バーベキューしている夏の日

ひとまず、タテヨコ共に200pxの正方形に収まっていませんか?

どういう仕組みなのか、次のセクションからご説明していきます!

ページの先頭へ戻る

[比較]ただ幅&高さだけを指定した場合

では、次は[object-fit: cover;]がない場合と比較してみましょう。

img {
width: 200px;
height: 200px;
}

HTML&CSSのコーディングを経験されている方にとっては予想通りかと思いますが、長方形であってもムリヤリ正方形に収まってしまうのです(^^;)

夏の夜に現れた黒髪の女性かな?  夏の夜に現れた黒髪の女性かな?
1枚目(左)は[object-fit:cover;]あり、2枚目(右)は無し

ちょっと「つぶれている」のがお分かりでしょうか?

黒髪の女性は[object-fit:cover;]を指定した1枚目(左)では上下途中で切れています。

これは、タテヨコ比を保ったまま指定のサイズに収めて、あふれたぶんをトリミングしているので問題無しです(^^)

一方の2枚目(右)は、黒髪の女性の「つむじ」あたりも見えていますし、肩の位置も1枚目(左)と違いますよね?

これは、トリミングせずに指定のサイズに押し込んでしまった結果です(^^;)

バーベキューの写真も見てみましょう!

バーベキューしている夏の日  バーベキューしている夏の日
1枚目(左)は[object-fit:cover;]あり、2枚目(右)は無し

1枚目(左)の[object-fit:cover;]ありの写真と比べると、2枚目(右)の写真は、割り箸の後ろの黒いズボンの見えている範囲が明らかに違いますし、お肉を焼いている網の形も違って見えます。

やっぱりこちらも、タテヨコ比を考慮せずに収めてしまった結果です…(^^;)

 

こうなってしまうからこそ、これまでのコーディングでは、様々な手法が試されてきたんですよね(^o^)

あるときは、divタグの背景要素にしてみたり、またあるときは複数パターンのタテヨコ比で画像を作ってみたり。

さらにあるときは…、って、画像のトリミングで苦労されてきたコーダーさんも少なくないはずです(^^;)

でも!!

[object-fit: cover;]を使う方法があれば、これまで苦労してきたコーディングのうち、一部は解消されるかもしれません。

画像のトリミングで悩まれている方の解決法の一つになれれば幸いですm(__)m

 

(もしどうしてもダメだったらまた別の方法を試してみてください、ゴメンなさい……。)

ページの先頭へ戻る

[参考]ところで[object-fit:cover;]って何なのか!?

さて、今回のポイントを整理しておきましょうか( ^∀^)

[object-fit:cover;]って一体なんなの!?

なぜこの1行だけで、指定サイズの画像トリミング問題の一部が解決できてしまうのでしょうか??

CSSの[object-fit]プロパティというのは、そのコンテンツがどのようにページ内(またはどこかの要素内)に収まるかを定義するものです。

初期値は[fill]で、今回のimgタグで言えば2番目のセクションの「[比較]ただ幅&高さだけを指定した場合」と同様です。

今回はその[object-fit]プロパティの値を[cover]に設定したもの。

cover(カバー)なので、対象のオブジェクトを覆うようなイメージを持っていただければわかりやすいでしょうか。

[cover]の場合は[object-fit]プロパティの値を使用した要素のサイズを完全に覆いきるもののうち最小のサイズ(しかもタテヨコ比は変わらず)になります。

つまり!

黒髪の女性の写真の元々のサイズは[幅:900px/高さ:1200px]です。

バーベキューの写真のほうは[幅:1200px/高さ:900px]です。

それに対して、今回指定したサイズは[幅:200px/高さ:200px]でした。

黒髪&バーベキューの写真が指定のサイズを覆いきるには、幅と高さが200pxあれば良いことになりますよね?

しかもタテヨコ比は変わらずなので、黒髪の写真とバーベキューの写真は、幅か高さのどちらかを200pxとして、もう片方も同じ割合で縮小する(この場合、約267pxになる)のです。

そのうえで、はみ出てしまう約67pxぶんはカット、となるわけです。

こうしてめでたく、指定サイズに収まって、あまりをトリミングした画像が出来上がりました( ^∀^)

 

なお、似たような考え方で逆の意味で使われることが多いのが[object-fit: contain;]

[object-fit: cover;]が「指定の要素を覆いきる最小のサイズ」への変形でした。

一方の[object-fit: contain;]は、「指定の要素からはみ出さない最大のサイズ」です。

今回使用した2種類の画像にそちらを適用するならば、黒髪の女性写真は[幅:150px/高さ:200px]に、バーベキューの写真は[幅:200px/高さ:150px]に縮小されて、200px四方の正方形に収まることになります。

これらを応用すると、レスポンシブWebデザインでも様々な応用ができそうですね(⌒▽⌒)

ページの先頭へ戻る

今回の記事の写真には「ぱくたそ」さんのフリー素材を使用させていただきました( ^∀^)

いつもありがとうございます!

この記事の感想をお寄せください

[CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:CSSに1行追加!画像を指定サイズでトリミングできる[object-fit:cover;]の威力( ̄▽ ̄)

ホームページ制作の始まりの段階で「ヒアリング」という工程を迎えることも多いかと思います。 仮に「ヒアリング」という名称を使わなくても、依頼者様のご希望を伺 …… 続きを読む

Googleのサービスの中に「Google Search Console(グーグル・サーチ・コンソール)」というものがあります。 こちらも他の多くのサービ …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ