Several ways to implement CSS height changing with width ratio

[Solution 1: padding implementation]

principle:

If the value of an element's padding is a percentage, then this percentage is relative to the width of its parent element, and the same is true for padding-bottom.

Use padding-bottom instead of height to achieve the effect of height being proportional to width. Set padding-bottom to the value of the height you want to achieve. At the same time

Its height is set to 0 so that the element's "height" is equal to the value of padding-bottom, thus achieving the desired effect.

<div class="father">
    <div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
  padding-bottom: 20%;
  width: 20%;
  height: 0;
  background: #888888;
}
</style>

The aspect ratio of the above example is 1:1, which means it is a square and scales proportionally according to the width of the parent box.

[Solution 2: A hidden picture to achieve]

principle:

If the div container is not given a height, its height will expand as the elements inside the container change. At this time, we add a picture that matches our aspect ratio inside the container, set the width of the picture to 100%; the height is auto. We know that if the picture only sets the width, the height will change proportionally with the width and automatically scale, so that the height of our internal sub-container will also scale proportionally. Of course, you can hide this img or cover it with another box.

#container {
  width: 100%;
}
.attr {
  background-color: #008b57;
}
.attr img{
  width: 100%;
  height: auto;
}
</style>
<div id='container'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

This method does not require any compatibility considerations and runs perfectly on PC mobile. Apart from adding a DOM structure, it is not worth mentioning considering the hundreds or thousands of codes on a page.

If you think that adding the img tag causes too many http requests, then base64 image encoding can solve this problem. Since our image only needs one shape,

You can compress and encode it boldly, even saving the http request.

[Scheme 3: vw,vh]

New units of CSS3 (CSS3 is great~), we define the width and height of the parent container as the same vw, so that the height and width of the parent container are the same value. At this time, the width and height values ​​of the child container are set as percentages. No matter how the parent container changes its size, the height and width ratio of the child container will not change

Unit Description
vw is relative to the viewport width
vh is the height relative to the viewport
vmin is relative to the smaller of the width or height of the viewport, divided equally into 100 units of vmin

vmax is relative to the larger of the viewport's width or height, divided evenly into 100 units of vmax

<div class="father">
    <div class="childbox"></div>
</div>
.childbox{    
  width: 20%;
  height: 20vw;
  background: #888888;
}

This concludes this article on several ways to implement CSS height proportional to width. For more relevant content on CSS height proportional to width, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!