Web制作メモ -トップへ-

[CSS] 画像の縦横比を維持して縮小する

HTML&CSS2014.12.08 16:14

レスポンシブデザインは表示するデバイスに応じて画面幅が変わります。

画面幅に応じて画像も伸縮させようとwidth:100%;とだけ指定すると、高さが変わらず横幅だけ伸縮してしまいます。

縦横比を維持して伸縮するにはheight:auto;も指定します。

縦横比を維持して縮小

img {
    width: 100%;
    height: auto;
}