こんにちは。

WEBデザイナー兼プロ格闘家のショウイチです。

今日は、画像のサイズ調整に便利なCSSプロパティーobject-fitを紹介していきます。

object-fitは、画像を指定のサイズにフィット・トリミングをすることができる便利なCSSプロパティーです。

object-fitを使えば、わざわざ同じサイズの画像を作らなくても、簡単にトリミングできるので、作業時間もかなり短縮できます。

background-sizeと同じ作用をするイメージですね。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

Amazon

Yahoo!ショッピング

楽天

object-fit

それではobject-fitついて説明をしていきます。

例えばこの下の画像を200pxのサイズに切り抜きたいと思ったとき。

Photoshopなどでわざわざそのサイズの画像をトリミングするのはめんどくさいですね。

こんな時、object-fitを使えば、簡単にトリミングすることができます。

するとこのような形になります。

たった1行追加するだけで、自動でトリミングしてくれましたね。

object-fit: cover;の場合、元の画像の縦と横の比率を保ちながら、指定した要素内を、全て覆うようにサイズが変形します。縦横の小さいほうを基準に自動でフィットし、その要素からはみ出た部分はトリミングされます。

object-fitのプロパティー

object-fitではcoverの他にも4種類、全部で5種類の値が設定できます。

コードは以下の通り。

よくある使い方

よくあるのが、ニュースカード/ブログカードを横並びに配置するとき、元の画像の大きさが違う場合このようになります。

これではとても見づらいです。

これにobject-fit: cover;をつけると。

画像の比率を維持したまま、余白が出ることなく指定した大きさにサイズが変更されました。

もし画像をトリミングせずに全体を表示したい場合は、object-fit: contain;をつけます。

すると表示したい画像をトリミングせずに、全体を表示し、指定した要素内に収まります。

もし画像の比率を変えたくない、だけど余白を出したくないという場合は、パーセントで指定するのではなく、px で指定する方法もあります。好みの位置にで全体を覆い、object-positionで画像の位置を任意の場所に指定することもできます。

このようにパーセントやpxで指定する方法もあり任意の位置まで調整できます。

object-fitを使えばpositionで位置調整をしたり、overflow: hidden;も使わなくてもいいので、CSS自体もすっきりと整理してあげることができますね。

是非参考にしてください。

それでは本日はここまで、また次回！

Webデザイン良質見本帳　目的別に探せて、すぐに使えるアイデア集

書は415点の厳選した良質なWebサイトを集めた見本集です。レイアウト、配色、フォント、素材、プログラムなど、ページを構成しているデザインパーツまで分解して解説しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。「アイデアが見つからない」「イメージはあるけど、何が必要で、どうつくればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。

Amazon

Yahoo!ショッピング

楽天