NEW ARTICLE
スーパーカブのリアボックスをワンタッチ化したい①
  • レスポンシブサイトにbackground-imageで画像を配置

レスポンシブサイトにbackground-imageで画像を配置

お久しぶりです。
先日ちょっとわからないことがあったので調べてみたことをメモとして残しておこうと思います。

普段、画像を配置する際、imgタグにて配置します。
レスポンシブのサイトであればwidthを100%指定しておけばいいのですが、
それがCMSで、スタイルシートしかいじれない状態だとしたらどうしましょう…

そんな問題を解決してみました。

例えばトップバナーがそんな仕様だった場合ですが、
htmlがこれだけ…

<div class="top_image">
</div>

そんな時はCSSで画像を配置しますが、ちょっとしたコツでちゃんとimgタグでwidthを100%指定した時と同じ動作をしてくれます。

.top_image{
	width: 100%;
	height: 0;
	padding-top: 25%; /* (画像の高さ ÷ 画像の横幅) × 100 */
	background: url(画像のパス);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

初歩的なことかと思いますが、メモ程度に…