CSSで、画像の高さを横幅とそろえる方法

2023年08月06日

CSSで、画像の高さを横幅とそろえる方法についてです。

以下のようなCSSの要素があったのですが

width:600px;

max-width:100%;

height:600px;

これだと、画像の要素が600px以下になったときに、高さが600pxのままでそろわなくなりますよね。

どうやったらそろうようになるか色々と考えたのですが、以下の記述でいけました。

height:calc(var(–variable-width));

上記の方法だと、常に高さが横幅と同じになるみたいです。

便利ですね。以上です！