CSS:親要素の形状サイズで画像をトリミング（切り抜き）、object-fit。

〽️ 画像サイズを問わずにフィットさせる。


枠内に画像を収めたい。

こんにちは、「ふ」です。
webページで、決められた範囲内に画像を収めたい。

<div class = "frame">

ここに縦長の画像を置くと、当然枠からはみ出してしまいます。

HTML

「「１」」

ブラウザ

親要素（frame）のwidthやheightを指定していても、その中に普通に画像を貼っただけでは、はみ出したり小さかったりしてしまいます。





いろんなサイズや形状の元画像を、ページ内で同じサイズで並べたい時など、どうすればいいのか。


試しに子要素（img）のサイズを強制的に親要素に合わせてみます。

CSS

.frame img { 「「１width:100%; height:100%;」」 }





あちゃー。


今度は見事に画像が潰れてしまいました。



縦横比を保ちつつ中央でトリミング。



これを解決するには、CSSのobject-fitプロパティを使用します。

CSS

.frame img { width:100%; height:100%; 「「１object-fit:cover;」」 }

object-fitの値を「cover」とすると、親要素（frame）のサイズで、元画像を中央からトリミングしてくれます。

ブラウザ

はい。元画像の縦横比を保ったまんま、親要素の枠内にぴったり収める事ができました。便利 🎵



角丸に対応させましょう。

<div class = "frame_2">

扨（さて）、こんなのはどうだろう。親要素が角丸になっています。
ちなみにCSSはコチラ⬇︎

.frame_2 { height:50vw; width:80vw; border:solid 0px ; border-radius:2em; margin:0 auto; }

ここに画像を置いてみます。はたして・・

「「１」」

ブラウザ

やはり画像の角が親要素からはみ出てしまいました。うん、こんな時は親要素にoverflow:hiddenを指定しましょう。

CSS

.frame_2 { height:50vw; width:80vw; border:solid 0px ; border-radius:2em; margin:0 auto; 「「１overflow:hidden;」」 }

ブラウザ

できました！
〜もっと調子に乗りたいと思います。



じゃあもしかして。

CSS

.frame_3 { height:60vw; width:60vw; border:solid 0px; border-radius:50%; overflow:hidden; margin:0 auto; }

<div class = "frame_3">

CSSで作った円形の親要素。郊外にあるファミレスの看板みたいですが、もしかしてこれでもトリミングできるのか？ 貼ってみます。

HTML

「「１」」





ブラウザ

なんか交通標識みたいになったけど、見事にできました！
twitterのアイコン設定（2019年9月現在）と同じく、画像を設定するだけで円形に切り取られて表示されています。





サムネイル付きリストなどに使える。

webページに使いたい画像はカメラアプリで撮影したもの、CGソフトで作ったものなど、縦横比やサイズは様々です。それらをいちいちリサイズさせて貼り付けるのは非常に手が掛かります。

しかしobject-fitとoverflowプロパティを使えば、CSSだけで出所の違う画像たちを同じサイズに整頓して表示できます。

円形のアイコン表示やサムネイル付きのリストを作る時などに非常に便利な方法です。ぜひサイトで使ってみてください！











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧