calc()の使用方法について

「画面幅に応じてwidthを調整したい」
コーディング中、そんなシチュエーションにぶつかった経験がある人は多いと思います。

そんな時に使えるのが、”calc()"です

width: calc(100% - 16px);

このように書くことで、「100%の状態から16pxを引いた幅」でwidthを指定することができます。

注意点

縦横比を維持したい場合は、aspect-ratioが使用できます。

/*縦横比1：1*/
aspect-ratio: 1; 

ただし、autoでも良いため高さの指定が必要なようです。
親要素にdisplay:flex;を指定している場合は、heightをfit-contentにすると機能するようです。

※追記：
htmlのwidth属性やheight属性を指定していなければ、heightの指定は必要ないかもしれません。
width属性等はページ表示時に、そのタグの領域を確保する働きがあるようで、
heightプロパティに何も書かなければ、htmlのheight属性が適用され、縦横比の自動調整が働かなくなる、ということかも？