こんにちは、「ふ」です。
webページで、決められた範囲内に画像を収めたい。
<div class = "frame">
ここに縦長の画像を置くと、当然枠からはみ出してしまいます。
HTML
ブラウザ
親要素(frame)のwidthやheightを指定していても、その中に普通に画像を貼っただけでは、はみ出したり小さかったりしてしまいます。
いろんなサイズや形状の元画像を、ページ内で同じサイズで並べたい時など、どうすればいいのか。
試しに子要素(img)のサイズを強制的に親要素に合わせてみます。
CSS
今度は見事に画像が潰れてしまいました。
これを解決するには、CSSのobject-fitプロパティを使用します。
CSS
object-fitの値を「cover」とすると、親要素(frame)のサイズで、元画像を中央からトリミングしてくれます。
ブラウザ
はい。元画像の縦横比を保ったまんま、親要素の枠内にぴったり収める事ができました。便利 🎵
<div class = "frame_2">
扨(さて)、こんなのはどうだろう。親要素が角丸になっています。
ちなみにCSSはコチラ⬇︎
ここに画像を置いてみます。はたして・・
ブラウザ
やはり画像の角が親要素からはみ出てしまいました。うん、こんな時は親要素にoverflow:hiddenを指定しましょう。
CSS
ブラウザ
できました!
〜もっと調子に乗りたいと思います。
CSS
<div class = "frame_3">
CSSで作った円形の親要素。郊外にあるファミレスの看板みたいですが、もしかしてこれでもトリミングできるのか? 貼ってみます。
HTML
ブラウザ
なんか交通標識みたいになったけど、見事にできました!
twitterのアイコン設定(2019年9月現在)と同じく、画像を設定するだけで円形に切り取られて表示されています。
webページに使いたい画像はカメラアプリで撮影したもの、CGソフトで作ったものなど、縦横比やサイズは様々です。それらをいちいちリサイズさせて貼り付けるのは非常に手が掛かります。
しかしobject-fitとoverflowプロパティを使えば、CSSだけで出所の違う画像たちを同じサイズに整頓して表示できます。
円形のアイコン表示やサムネイル付きのリストを作る時などに非常に便利な方法です。ぜひサイトで使ってみてください!
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧