親要素の代わりにHTML要素のサイズを設定する

Question

現在、私は、親要素のサイズの代わりに、HTML要素のサイズを画面のサイズに対して相対的に設定する方法があるかどうかを判断しようとしています。私は私のサイト全体の画像のサイズの一貫性を作るためにこれをしたいと思います。

ブラウザのサイズ変更の変化に応じて画像のサイズを適切に変更するためにパーセンテージを使用したいと思います。

たとえば、画像の幅を「幅：60％;」に設定した場合、画面のスペースの60％を占める代わりに、私のイメージを入れたいと思います。

これを行う方法はありますか？

Answer 1

はい：vwとvh単位を使用できます。これらは、ビューポート（=ブラウザウィンドウですが、全画面モードおよびモバイルデバイスではこれは画面サイズに等しい）の幅と高さのパーセンテージを表します。