How to achieve proportional scaling of height and width of divs

This article mainly shares with you how to achieve equal scaling of height and width of divs. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

1, Option 1: Do it responsively. You can set the height and width of p under different screen widths according to media queries. The specific settings depend on how you want to display responsively

@media only screen and (min-width: 100px) and (max-width: 640px) {
     div{width: 100px;
 height: 100px;
         }}@media only screen and (min-width: 641px) and (max-width: 789px) {
      div{width: 200px;
 height: 200px;
          }}

2. Option 2: Do it as a percentage. You need to use a little trick here. When padding is measured in percentage, it is calculated relative to the width of the container, so you can set the height to 0 and the content will naturally overflow.
Set a padding-bottom
height:0;
width:50%;
padding-bottom:30%
Then the height-to-width ratio of this div is 30%:50%

<strong>相关推荐：</strong><br/><a href="https://blog.csdn.net/majormayer/article/details/50731710" target="_self" style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px; text-decoration: underline;"><span style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;">创建一个宽高成比例的弹性div盒子</span></a><span style="font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;"><br/><a href="https://blog.csdn.net/u011558902/article/details/53259248" target="_self">理解CSS3中的background－size(对响应性图片等比例缩放)</a></span>

The above is the detailed content of How to achieve proportional scaling of height and width of divs. For more information, please follow other related articles on the PHP Chinese website!