【プログラミング】CSSプロパティheight: ⚪︎vw;で指定することについての理解

オンラインスクールの卒業制作を作成中だが、
一見簡単そうに見えるデザインだったが自力で実装できない部分があった。
chatGPTに聞いたりしたがイマイチ実装できず、やむをえず参考サイトでお手本のソースコードを見てみて、そのコードを拝借しながらなんとか実装できたが、その中にこんなheightの指定があった。

img {
      height: 61.2vw;

      @include global.mq(lg) {
        height: 438px;
        object-fit: cover;
        object-position: bottom;
        width: 100%;
      }
    }

heightの指定プロパティである、px,em,rem,%,vhはこれまでも使っていたが、

vw (Viewport Width)???
これってwidthの指定じゃないの？？？
と頭の中？まみれだったが、
chatGPT先生がすごくわかりやすく教えてくれた。

本当にchatGPTが使える時代にプログラミング勉強できて良かったと心の底から思う。

chatGPT4先生の回答

もし今後似たような実装をしたり、
heightでvwを使う機会があるとすれば1番恩恵を受けられそうなのは
画像、動画などでアスペクト比を保ちつつレスポンシブなレイアウトを作成する際に活用できそう、

.card {
  width: 80vw;
  height: 45vw;
}

こんな感じでwidthと組合わせて指定すればaspect-ratioプロパティを使わずに16:9のアスペクト比を保ちつつレスポンシブなレイアウトを組める。
フルスクリーンにしたくないけどアスペクト比を保ちたい時に使える。

こんな感じで今後も自分の理解を深めるためにnoteを更新していく。
書いてると自分の中で情報が整理されてスッキリする。

世界一流エンジニアの思考法実践していく。