margin
et padding
sont relatives. Pour le calcul de la largeur, ceci est différent de la valeur en pourcentage des attributs tels que top
et bottom
.
<p>Les raisons de cette conception seront expliquées dans mon nouveau livre (qui devrait paraître dans quelques mois), je n'entrerai donc pas dans les détails ici.
<p>Pour l'attribut padding
, le pourcentage padding
dans n'importe quelle direction est calculé pour la largeur, ce qui nous permet d'implémenter facilement un conteneur au niveau du bloc à proportion fixe. Par exemple, supposons qu'il y ait un élément. : <p>
p { padding: 50%; }
p { padding: 100% 0 0; }
p { padding-bottom: 100%; }
<p>
peut toujours conserver la même proportion. <p>
Quelle est la fonction de cette fonctionnalité qui permet de fixer la proportion ? <p>Pour la plupart des mises en page, nous n'exigeons pas de proportion fixe, mais il y a une exception, et c'est l'image, car la taille originale de l'image est fixe. Dans la mise en page traditionnelle à largeur fixe, nous définirons des valeurs de largeur et de hauteur spécifiques pour l'image afin de garantir que notre image occupe une zone stable, mais dans le terminal mobile ou dans le cas d'un développement réactif, la largeur finale de ; l'image est très petite Cela peut être incertain. Par exemple, pour une bannière publicitaire sur téléphone mobile, la largeur sous iPhone 7 est de 375, sous iPhone 7 Plus elle est de 414, et il existe d'autres tailles comme 360. Ce qu'il faut. à l'heure actuelle, il ne s'agit pas d'un paramètre de taille fixe pour l'image, mais d'un paramètre de proportion. <p> a généralement les implémentations suivantes : <p>1. Fixez une hauteur, puis utilisez le contrôle d'attribut <p>, comme suit : background-size
.banner { height: 40px; background-size: cover; }
vw
.banner { height: 15.15vw; background-size: cover; }
vw
Cependant, si notre image n'est pas une bannière, mais doit être <p> éloignée des côtés gauche et droit, à ce moment-là, notre code CSS sera un peu encombrant si nous voulons maintenir le. proportion parfaite, nous pouvons utiliser CSS3 1rem
Calcul : calc()
.banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover; }
calc()
Les attributs, sa compatibilité et son adaptabilité sont excellents. padding
3. Utilisez le pourcentage <p>, comme suit : padding
.banner { padding: 15.15% 0 0; background-size: cover; }
<img>
Cela peut également être facilement géré. La routine est relativement fixe. Un élément conteneur à proportion fixe est nécessaire en dehors de l'élément image, comme la structure HTML suivante : l'élément padding
<p class="banner"> <img src=""banner.jpg> </p>
.banner
, et le code CSS est le suivant : .banner
.banner { padding: 15.15% 0 0; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
padding
unités. Après tout, comprendre vw
semble. mieux C'est plus simple, donc je n'ai pas introduit les techniques pertinentes. Cependant, à mesure que de plus en plus de mises en page liées aux images sont traitées, j'ai constaté que la valeur pratique du pourcentage vw
est supérieure à ce que l'on imaginait. Il est applicable à plus de scénarios que l'unité padding
et a une meilleure compatibilité (fonction de pourcentage prise en charge par IE6+, L'image couvre 100 % du support IE8+). vw
Pour les mises en page complexes, si la largeur de l'image n'est pas fixe et adaptative, on pense généralement à une astuce, qui consiste à définir uniquement la largeur de l'image, par exemple : <p>img { width: 100%; }
0
到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。<p>所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比padding
布局更好的做法!<p>缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下:<p><p>此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下:<p class="works-item-t"> <img src="./150x200.png"> </p>
.works-item-t { padding-bottom: 133%; position: relative; } .works-item-t > img { position: absolute; width: 100%; height: 100%; }
padding
值只使用padding-bottom
表示的时候,如果没有text-align
属性干扰,<img>
元素的left:0;top:0
是可以省略的。<p>对于这种图片宽度100%容器,高度按比例的场景,padding-bottom
的百分比值大小就是图片元素的高宽比,就这么简单。<p>但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比4:3
,此时,CSS垂直方向百分比就666了,如下:.img-box { padding: 0 50% 66.66% 0; }
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!