物覚えの悪いプログラマの備忘録

このブログには私が試してみたことを記載していっております。忘れたときのために備忘録として利用しているだけですので、間違ったことを書いているかもしれません。 みなさまの役に立つ情報があれば幸いです。

横幅や高さを自動で可変する

img {
max-width: 100%;
height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}

img {
max-height: 100%;
width: 100vh; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}

高さの指定に幅の数値を使用することができるのです。これによりどんな機種のスマホであっても、横幅いっぱいに画像を自動リサイズした時の横幅から高さを取得することが可能となるのです。
あくまでこれは一例ではありますが、viewportを使用したスマホサイトの構築など色々な使い方が可能であることはお分かりいただけるかと思います。