教材では学べないような、他のコーダーに差をつけるための知識をzennさんの本という形で出しているので合わせてご覧ください。

HTMLにおける、上手に比率維持した画像を作る方法(imgタグ/background-image)

HTML/CSS

こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。

比率維持した状態でimgタグを使う

まずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。
これを調整する場合、親要素の縦か横に合わせることになります。合わせる基準が縦なのか横なのかによって指定を変えます。
例えばヘッダーのロゴは縦幅に、記事のアイキャッチ画像は横に合わせることが多いです。

よくあるヘッダーのロゴ画像

記事の画像。横幅に合わせて画像が伸び縮みする

また要素自体はインラインなので配置に難があります。そこでimgタグは基本的にdisplay: block;にしてから使うようにしています。

横に合わせる場合

<img class="ImgWidth" src="お使いの画像のパス" alt="">
.ImgWidth {
  display: block;
  /*横に合わせたいのでwidthを100%に*/
  width: 100%;
  height: auto;
}

上記のコードで以下のような挙動です。(gif画像)

縦に合わせる場合

<img class="ImgWidth" src="お使いの画像のパス" alt="">
.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を作りたいときは以下のように指定します。

<div class="SixteenNineParent">
  <div class="SixteenNineChild></div>
</div>
.SixteenNineParent {
  width: 100%;
}

.SixteenNineChild {
  /*親要素と同じにしておく*/
  width: 100%;
 /*heightがあるとその分縦幅が増えるので0にする*/
  height: 0;
 /*親要素の横幅に対しての比率*/
  padding-top: calc(9 / 16 * 100%); /* 56.25%になります */
  background-color: pink;
}

この指定で、以下の挙動です。(gif画像)

これで比率を維持したdivが出来ました。画像を入れましょう。
理想は画像の比率と全く同じ比率のdivを作ることですが、動的に画像を入れる場合は必ずしもそうなりません。最低限綺麗に見えるように指定します。

<div class="SixteenNineParent">
  <div class="SixteenNineChild"></div>
</div>
.SixteenNineParent {
  width: 100%;
}

.SixteenNineChild {
  width: 100%;
  height: 0;
  padding-top: calc(9 / 16 * 100%);
  /*元の画像は670:443なので、16:9ではない*/
  background-image: url(img/bg-670x443.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

これで比率を維持してbackground-imageを使うことが出来ました。

まとめ

いかがでしたでしょうか。
画像の扱いに困ったら、まずはこの方法を試してみてください。

コメント

タイトルとURLをコピーしました