読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

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

Web Web-ホームページ制作

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さんにもかなりお世話になりました。


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

ページトップ