Comment obtenir une mise à l'échelle proportionnelle de la hauteur et de la largeur des divs

Cet article partage principalement avec vous comment obtenir la mise à l'échelle proportionnelle de la hauteur et de la largeur des divs. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1. Option 1 : Faites-le de manière réactive. Vous pouvez définir la hauteur et la largeur de p sous différentes largeurs d'écran en fonction des requêtes multimédias. Les paramètres spécifiques dépendent de la façon dont vous souhaitez afficher de manière réactive

.

@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 : Faites-le en pourcentage. Une petite astuce doit être utilisée ici. Lorsque le rembourrage est mesuré en pourcentage, il est calculé par rapport à la largeur du conteneur, vous pouvez donc définir la hauteur. 0 et le contenu débordera naturellement. ,
Définissez un padding-bottom
height:0;
width:50%;
padding-bottom:30%
Ensuite, le rapport hauteur/largeur de ceci. div est de 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!