【CSS】height:autoって指定する意味ありますか？？

Question

ふと疑問に思ったのですが、CSSの「height:auto」は必要あるのでしょうか？
高さを成り行きにするのであれば、heightを指定しなければ良いのではないかと思うのですが、いかがでしょうか？

不躾な質問で恐縮ですが、回答お待ちしております。

Answer 1

<img src="https://picsum.photos/1920/1080" width="1920" height="1080">

例えば、コンテナを飛び出さないように、

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

としますよね。このとき、img 要素の width と height 属性で値が指定されていた場合、height: auto; を省略してしまうと、高さが1080pxのままで縦横比が崩れます。

Comments

[退会済みユーザー]

丁寧な解説ありがとうございます！
なるほど、既存height指定を打ち消す（上書き）ために使うのですね
よくわかりました！

Answer 2

わざわざheight: autoだけ書いても意味はありませんが、他の指定をしたものを上書きする場合に必要となります。

Comments

[退会済みユーザー]

早速ご回答いただきありがとうございます！
なるほど、既存の指定を消すために使うのですね！

Answer 3

heightのデフォルト値がautoなので

.box {
  height: 100px;
}
.box .h-auto {
  height: auto;
}

など上書きする場合に有効です。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます！