HTMLからじゃなくCSSで画像を表示させたい
CSSで画像を表示させる場合は基本的にbackgroundで背景画像として表示させることが一般的ですよね。
アイコンだと擬似要素で背景画像として表示させるのが便利なのですが、普通はHTMLでimgタグで表示させるような大きな画像はそれではうまくいきません。
今回は訳あってHTMLを触りたくなかったので、
「CSSだけで画像の高さを保ってレスポンシブに表示できないかな?」
と思い色々やってみました。
・完成イメージ

・条件
- HTMLを触らずにCSSだけで画像を表示させる
- 画像は全幅(100%)で表示させる
- レスポンシブでウィンドウの幅に合わせて綺麗に表示させる
高さを持たせるためにpaddingをつける
高さをつけるためにheightをつけると高さが固定されてしまい、ウィンドウの幅が変わったときに画像の端が切れてしまいます。
なのでpaddingで余白をつけて高さをつけます。
CSSのコード
1 2 3 4 5 6 |
.img { background: url(画像までのパス) center center no-repeat; background-size: cover; width: 100%; padding-top: 66.7%;/* 画像サイズによって変化します */ } |
HTML側には背景画像が入る部分へimgクラスをつけて、中身は空にしています。
paddingは画像サイズによって変化します。
paddingの計算方法
padding = 画像の高さ ÷ 画像の幅 × 100
これで計算した余白をpaddingで%を使ってつけるとレスポンシブで高さが可変します。
スマホサイズにしたときもこの通りです。
少しでも参考になれば幸いです。
コメント