建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

建設現場に大型LEDビジョンや液晶ディスプレイで現場のICT化を促進する提案を行うヤマト広告公式ブログ

ヤマト広告公式ブログ
大型LEDビジョンモニたろうや液晶モニターモニすけなど
デジタルサイネージ提案で建設現場のICT化を促進します!

【HTML】背景画像の比率を維持する

f:id:yamato-ugaki:20170303194346j:plain

こんにちは。
Webコーダーの宇垣です。


最近流行りの全画面にすると、背景画像がついよくわからない画像になってしまいがちです。
デスクトップの大きなモニターでみると特に横に伸びてしまうことも多々あります。

f:id:yamato-ugaki:20170303194856j:plain

width:100%に設定をすると、高さをパーセント指定にはできません…。
でも高さを指定するとこんな感じで、横の伸びてしまった時に画像の一部分すぎて伝わらないという現象がおきます。


そんな時に利用したのがpadding-bottomです。
潔く高さはゼロにしてしまって、padding-bottomで高さを稼ぐ。
marginだと背景は適用されませんが、paddingだと適用されます。

f:id:yamato-ugaki:20170303195047j:plain


横幅に対して、の値を設定するとその比率を維持したまま背景を維持できます。
width:100% height:100% → 1:1
width:100% height:50% → 2:1
width:50% height:25% → 2:1 (画像2カラムのときなど)
width:100% height:33% → 3:1

パーセントでなくてもwidth:100pxとpadding-bottom:100px;とかでもできます。


無理して背景画像にしなくても画像でいいのでは、と思うこともありますが、
クライアント更新でどんな比率の画像が上がるかわからない
いちいちリサイズが面倒
…という時に

background-size:cover;が強い味方なのでどうしても背景画像を使ってしまいがち。
特に記事のアイキャッチも、記事によって画像の大きさはバラバラなのに一覧表示するときは同じサイズに統一しないと格好が悪い、という。
そんなときはwidthとpadding-bottomで空要素の高さを維持しつつ、background-coverがいいかと思います。

過去にこんな記事がありますがこの状態です。
blog.yamato-agency.com

この記事ではbackground-size:contain;は役に立たないと書いてありますがあれから2年?
containさんにもかなりお世話になりました。


クライアントの「こういうの、できない?」ということがきて初めて学ぶことができるんですね。。

ページトップ