随着视口宽度的变化，如何让所有 div 的高度缩小？

Question

How do I get all of my divs to shrink in height as the width of the viewport changes?

Example: https://jenis.com/

When you reduce the width of this website, the heights of the divs reduce in height.

Answer 1

You use percentage based CSS. For the main image, they are using the following tag to scale the background to the browser viewport:

background-size: 100% auto;

100% means the element's content area will equal exactly the explicit width of its parent, provided its parent has an explicit width.

Answer 2

You can use vh and vw units to achieve this. 'vw' is the viewport width and 'vh` stands for viewport height.

If you give height:50vw , the height of div will be directly proportional to the viewport width.