CSS: aspect-ratio プロパティを使ってみる

Created: 2021-01-30

1. このページの目的

CSS: aspect-ratio プロパティを使ってみる

2. このページでやっていること

使用するウェブブラウザ

Chrome 88

ソースコード

HTML

<img id="img1" src="sample-700.jpg"
     alt="" loading="lazy"
     srcset="sample-550.jpg 550w,
             sample-700.jpg 700w"
     sizes="100w">

aspect-ratio により、width, height 属性が必要なくなる。

CSS

#img1 {
  max-width: 700px;
  width: 100%;
  /*height: auto;*/
  aspect-ratio: 8 / 5;
}

height: auto; はなくてよい。

3. メモ

<img> タグに、width, height 属性が必要なくなるのが便利。

4. 参考