css 画像比率を保ったまま拡大・縮小する方法

Question

cssで画像の比率を変更するときに、
```
width:100%
max-width:80vw;
height:auto;
```

で縦横比を保ったまま拡大や縮小ができるとサイトに書いてあったのですが、
```
width:auto;
```
でも同じなのでしょうか？


また、

```
width:auto;
max-width:80vw;
height:auto;
max-height:90vh;
```
のような形でも比率を保ったままで拡大縮小ができるのでしょうか？

Accepted Answer

縦横比を保った画像（フルードイメージ）にするためのコードは通常、
次の2種類が一般的かと思います。

```CSS
/*パターン1*/
img {
  max-width: 100%;
  height: auto;
}
/*パターン2*/
img {
  width: 100%;
  height: auto;
}
```
パターン1の場合、画像の最大サイズはimg画像本来の原寸サイズとなり、それ以上には拡大しません。
画像本来のサイズより拡大はしたくない場合にはこちらを使います。

パターン2の場合、画像は親要素のサイズにあわせてどこまでも拡大します。
適切なサイズの画像を用意できない場合でも、サイズ不足を防ぐことができます。
その代わり、別途何らかの方法（max-widthを併記する、あるいは親要素にサイズを指定する等）で
最大サイズを指定しておかないと、レイアウトを適切に保つことができない場合があります。

なお、
```CSS
img{
  width:100%
  max-width:80vw;
  height:auto;
}
```
掲示されているこちらのコードは、基本的に上記のパターン2であると思われます。
ただ、2行目に記述されている「max-width:80vw;」の根拠が不明です。
たまたま参考にしたサイトで実現したいデザインの都合に合わせて必要な最大値を設定しているだけである可能性があります。

また、
```CSS
img {
  width:auto;
}
```
こちらのコードでは伸縮画像にはなりません。原寸表示されるだけです。

```CSS
img {
  width:auto;
  max-width:80vw;
  height:auto;
  max-height:90vh;
}
```
こちらの場合は、縦横比を保って伸縮する状態にはなりますが、

・`width:auto`と`height:auto`が初期値と同じであるため無駄な記述になる
・画像最大値の設定が80vw, 90vhであることが全てのケースで適切であるか不明
・vw, vhの単位を理解しない環境では伸縮画像にならない

といった問題があり、あまり適切であるとは思えません。

Answer

私はとりあえずやってみるタイプなので実際に3パターンやってみたらどうですか ```ここに言語を入力

```