コーディング

object-fitをつかって画像をボックスいっぱいに表示させる方法

2017.07.19

object-fitをつかって画像をボックスいっぱいに表示させる方法のアイキャッチ画像

コーディングなどをしていると、縦横比を維持したままそのボックスいっぱいに画像サイズを表示したい場合が多々あります。
こういう場合backgroundを使用すると比較的容易に実現できるのですが、CMSと組み合わせるなどするときに、imgタグを利用して実現したい場合があります。

今回はそういったときに使用できる「object-fit」というプロパティを紹介します。

画像をトリミングせず、ボックスに入る最大サイズで表示する

プロパティを見ればわかりますが、backgroundと同じような設定で可能ですね。

画像をトリミングして、ボックスにを埋める最大サイズで表示する

こちらもbackgroundと似たような設定で可能ですね。
ただし注意点があります。object-fitはIEやEdgeでは正しく動作しません。したがってレスポンシブコーディングでスマホ表示のコーディングなどで使用することをお勧めします。

参考にしてみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。