横幅や高さを自動で可変する
img {
max-width: 100%;
height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}
img {
max-height: 100%;
width: 100vh; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}
高さの指定に幅の数値を使用することができるのです。これによりどんな機種のスマホであっても、横幅いっぱいに画像を自動リサイズした時の横幅から高さを取得することが可能となるのです。
あくまでこれは一例ではありますが、viewportを使用したスマホサイトの構築など色々な使い方が可能であることはお分かりいただけるかと思います。