Explication détaillée du pourcentage de remplissage CSS pour créer une mise en page d'image adaptative-js tutoriel-php.cn

Explication détaillée du pourcentage de remplissage CSS pour créer une mise en page d'image adaptative

小云云

Libérer： 2017-12-26 09:39:00

original

2289 Les gens l'ont consulté

Cet article partage principalement avec vous une explication détaillée du pourcentage de remplissage CSS pour créer une mise en page d'image adaptative Point de connaissance CSS : Lorsque le remplissage/marge prend une valeur sous la forme d'un pourcentage, qu'elle soit gauche/droite ou haut/. en bas, il est basé sur l'élément parent. La largeur est la référence !

1. Le pourcentage de remplissage CSS est calculé par rapport à la largeur

Dans le sens de flux horizontal par défaut du document, les valeurs de pourcentage vertical des attributs CSS 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.

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.

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 { padding: 50%; }

Copier après la connexion

ou :

p { padding: 100% 0 0; }

Copier après la connexion

ou :

p { padding-bottom: 100%; }

Copier après la connexion

Ensuite, la taille de cet élément est un carré avec une largeur et une hauteur de 1:1, quelle que soit sa largeur. Le conteneur parent est, cet élément  peut toujours garder les mêmes proportions. 

Quelle est la fonction de cette fonctionnalité qui permet de fixer la proportion ?

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 sur le terminal mobile ou dans le cas d'un développement réactif, la largeur finale de l'image ; est très petit Cela peut être incertain. Par exemple, pour une bannière publicitaire sur un téléphone mobile, la largeur sous l'iPhone 7 est de 375, sous l'iPhone 7 Plus elle est de 414, et il existe d'autres tailles comme 360. Ce qu'il faut pour cela. le temps n’est pas un paramètre de taille fixe pour l’image, mais un paramètre de proportion.

a généralement les implémentations suivantes :

1. Fixez une hauteur, puis utilisez le contrôle d'attribut , comme suit : <. 🎜>background-size

.banner {
 height: 40px;
 background-size: cover;
}

Copier après la connexion

L'effet en temps réel est le suivant :

Vous pouvez voir qu'à mesure que la largeur change, il y aura toujours une image zones (largeur ou hauteur) qui ne peuvent pas être affichées. Ce n'est pas une approche parfaite.

2. Utilisez l'unité de largeur de fenêtre

, comme suit : vw

.banner {
 height: 15.15vw;
 background-size: cover;
}

Copier après la connexion

Si les exigences de compatibilité ne sont pas très élevées, utiliser

C’est aussi une bonne idée, au moins c’est plus facile à comprendre. vwCependant, si notre image n'est pas une bannière, mais doit être

é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 Calcul : 1remcalc()

.banner {
 height: calc(0.1515 * (100vw - 2rem));
 background-size: cover;
}

Copier après la connexion

Si la largeur de l'image des deux côtés est dynamiquement incertaine, alors

est également étendu en ce moment, cependant, ce n'est qu'un attribut ordinaire et banal, mais sa compatibilité et son adaptabilité sont de premier ordre. calc()padding3. Utilisez le pourcentage

, comme suit : padding

.banner {
 padding: 15.15% 0 0;
 background-size: cover;
}

Copier après la connexion

À ce moment, peu importe la façon dont les éléments externes du changement d'image, la proportion sera constante.

2. Remplissage en pourcentage CSS et disposition d'image adaptative en largeur

Mais parfois, nos images ne sont pas pratiques pour être présentées comme images d'arrière-plan, mais sont en ligne

, pourcentage Cela peut également être facilement géré. La routine de recherche est relativement fixe. Un élément conteneur à proportion fixe est requis en dehors de l'élément image, comme la structure HTML suivante : <img>padding

<br/>

Copier après la connexion

< L'élément 🎜>

<p class="banner">
 <img src=""banner.jpg>
</p>

Copier après la connexion

est également chargé de contrôler la proportion, puis l'image est remplie avec l'élément

Le code CSS est le suivant : .banner.banner

.banner {
 padding: 15.15% 0 0;
 position: relative;
}
.banner > img {
 position: absolute;
 width: 100%; height: 100%;
 left: 0; top: 0;
}

Copier après la connexion

effet C'est fait !

Voir, c'est croire. L'année dernière, les bannières publicitaires sur de nombreuses pages de la version mobile du site Web chinois de Qidian ont été mises en œuvre de cette manière. Pour l'effet final, veuillez voir la capture d'écran gif ci-dessous (si l'image ne peut pas être affichée, vous pouvez laisser un commentaire) :

Comme vous pouvez le constater, peu importe la largeur de l'écran, le ratio de nos images publicitaires est fixe, il n'y aura pas de détourage , aucune zone ne manquera et l'aménagement sera très soigné et plus robuste.

————-

En fait, j'ai toujours sous-estimé la valeur d'application pratique du pourcentage en raison de l'existence de

unité Après tout, comprendre 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 padding est supérieure à ce que l'on imaginait. Il est applicable à plus de scénarios que l'unité vw et a une meilleure compatibilité (fonction de pourcentage prise en charge par IE6+, L'image couvre 100 % du support IE8+). vwpaddingPour 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 : vw

此时浏览器默认会保持图片比例显示，图片宽度大了，高度也跟着一起变大；图片宽度小了，高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。

然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。

所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！

缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：

此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动，其核心HTML和CSS代码如下：

<br/>

Copier après la connexion

<p class="works-item-t">
  <img src="./150x200.png">
</p>

Copier après la connexion

.works-item-t {
 padding-bottom: 133%;
 position: relative;
}
.works-item-t > img {
 position: absolute;
 width: 100%; height: 100%;
}

Copier après la connexion

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img>元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：

.img-box {
 padding: 0 50% 66.66% 0;
}

Copier après la connexion

CSS3自适应全屏焦点图切换的特效怎么做

响应式和自适应有什么区别

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!