remplissage pour créer une mise en page d'image adaptative (pourcentage CSS)

Point de connaissance CSS : Lorsque padding/margin prend une valeur sous forme de pourcentage, qu'elle soit gauche/droite ou haut/bas, elle se base sur la largeur de l'élément parent comme 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. : e388a4556c0f65e1904146cc1a846bee

p { padding: 50%; }

ou :

p { padding: 100% 0 0; }

ou :

p { padding-bottom: 100%; }

Alors la taille de cet élément

est un carré d'une largeur. et une hauteur de 1:1, quelle que soit la largeur de son conteneur parent ? Cet élément e388a4556c0f65e1904146cc1a846bee peut toujours conserver la même proportion. e388a4556c0f65e1904146cc1a846bee

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 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.

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;
}

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

Vous pouvez voir qu'à mesure que la largeur change, il y aura toujours une partie de la zone de l'image (largeur ou hauteur) qui ne pourra pas être affichée, ce qui 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;
}

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

est également une bonne approche, au moins pour comprendre Soyez plus détendu. vw

Cependant, 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 1rem Calcul : calc()

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

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

est également étirée à ce moment-là, mais ce n'est qu'un ordinaire et banal calc()Les attributs, sa compatibilité et son adaptabilité sont excellents. padding

3. Utilisez le pourcentage

, comme suit : padding

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

À ce moment, peu importe la façon dont les éléments externes de l'image changent, la proportion est 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 a1f02c36ba31691bcfe87b2722de723bCela 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>

est également responsable du contrôle de l'élément image. proportion, puis remplissez simplement l'image avec l'élément .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;
}

L'effet est obtenu !

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 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 :

img { width: 100%; }

À ce stade, le navigateur conservera l'affichage proportionnel de l'image par défaut. À mesure que la largeur de l'image augmente, la hauteur augmentera également ; si la largeur de l'image devient plus petite, la hauteur deviendra également plus petite. Les développeurs ne semblent pas se soucier des proportions réelles de l'image.

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

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

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

此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属性干扰，a1f02c36ba31691bcfe87b2722de723b元素的left:0;top:0是可以省略的。

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

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

css登录界面美化

css如何实现鼠标滑过缩略图时放大图片

css实现鼠标触发效果

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!