こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。
目次
比率維持した状態でimgタグを使う
まずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。
これを調整する場合、親要素の縦か横に合わせることになります。合わせる基準が縦なのか横なのかによって指定を変えます。
例えばヘッダーのロゴは縦幅に、記事のアイキャッチ画像は横に合わせることが多いです。
また要素自体はインラインなので配置に難があります。そこでimgタグは基本的にdisplay: block;にしてから使うようにしています。
横に合わせる場合
|
1 |
<img class="ImgWidth" src="お使いの画像のパス" alt=""> |
|
1 2 3 4 5 6 7 |
.ImgWidth { display: block; /*横に合わせたいのでwidthを100%に*/ width: 100%; height: auto; } |
上記のコードで以下のような挙動です。（gif画像）
縦に合わせる場合
|
1 |
<img class="ImgWidth" src="お使いの画像のパス" alt=""> |
|
1 2 3 4 5 6 7 |
.ImgHeight { display: block; width: auto; /*縦に合わせたいのでheightを100%に*/ height: 100%; } |
上記のコードで以下のような挙動です（便宜上heightを100vhにしています）。（gif画像）
このような指定をすれば比率を崩さず画像を扱えます。
比率維持した状態でbackground-imageを使う
さて、background-imageで比率を維持したい場合です。この場合はdivなどのimgタグでないものを比率維持する必要があります。
比率維持したdivを作るには、padding-topを使います。padding-topを%指定する場合、なんと基準が親要素のwidthなんです。
なので、例えば16：9のdivを作りたいときは以下のように指定します。
|
1 2 3 4 |
<div class="SixteenNineParent"> <div class="SixteenNineChild></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.SixteenNineParent { width: 100%; } .SixteenNineChild { /*親要素と同じにしておく*/ width: 100%; /*heightがあるとその分縦幅が増えるので０にする*/ height: 0; /*親要素の横幅に対しての比率*/ padding-top: 56.25%; background-color: pink; } |
この指定で、以下の挙動です。（gif画像）
これで比率を維持したdivが出来ました。画像を入れましょう。
理想は画像の比率と全く同じ比率のdivを作ることですが、動的に画像を入れる場合は必ずしもそうなりません。最低限綺麗に見えるように指定します。
|
1 2 3 4 |
<div class="SixteenNineParent"> <div class="SixteenNineChild"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.SixteenNineParent { width: 100%; } .SixteenNineChild { width: 100%; height: 0; padding-top: 56.25%; /*元の画像は670:443なので、16:9ではない*/ background-image: url(img/bg-670x443.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } |
これで比率を維持してbackground-imageを使うことが出来ました。
まとめ
いかがでしたでしょうか。
画像の扱いに困ったら、まずはこの方法を試してみてください。
コメントを残す