画像の高さを指定して幅を成り行きにする場合の注意点

こんにちは。今日は画像を配置する際の注意点について書きます。

通常画像を配置する時、幅（width）を指定して配置することが多いと思います。（高さは成り行きで）

今回の「画像の高さを指定して幅を成り行きにする場合」というのは、

などが挙げられます。

では、通常の場合も踏まえてコードをみていきましょう〜！

コード

        <figure class="photo"><img src="assets/images/cont_img01.jpg" alt=""></figure>

幅300px、高さ150pxの画像を使用。

□幅指定の場合

.photo img {
  width: 300px;
  height: auto;
}

□高さ指定の場合

.photo img {
  width: auto;
  height: 150px;
}

imgタグに対して【height: auto;】はbase.cssなどのテンプレであらかじめ指定していることが多いかもしれません。

しかし、高さ指定の場合の【width: auto;】は知らないと指定し忘れることがあると思います。

これを指定しないとブラウザによっては画像のサイズがおかしくなってしまうため、サイズを指定したら片方には値autoを指定し忘れないように気をつけましょう！

では今日はここまで〜〜