Ausführliche Erläuterung des prozentualen CSS-Auffüllens zum Erstellen eines adaptiven Bildlayouts

Dieser Artikel gibt Ihnen hauptsächlich eine detaillierte Erklärung des prozentualen CSS-Auffüllens zum Erstellen eines adaptiven Bildlayouts. CSS-Wissenspunkt: Wenn Auffüllen/Rand einen Wert in Form eines Prozentsatzes annimmt, unabhängig davon, ob er links/rechts oder oben/unten ist , es basiert auf dem übergeordneten Element. Die Breite ist die Referenz!

1. Die prozentuale CSS-Auffüllung wird relativ zur Breite berechnet

In der standardmäßigen horizontalen Dokumentflussrichtung sind die vertikalen Prozentwerte der CSS-Attribute margin und padding relativ Bei der Breitenberechnung unterscheidet sich dieser vom Prozentwert von Attributen wie top und bottom.

Die Gründe für dieses Design werden in meinem neuen Buch (das in ein paar Monaten erscheinen soll) erläutert, daher gehe ich hier nicht weiter darauf ein.

Für das Attribut padding wird der Prozentsatz padding in jeder Richtung für die Breite berechnet, sodass wir problemlos einen Container mit festem Anteil auf Blockebene implementieren können. Angenommen, es gibt einen e388a4556c0f65e1904146cc1a846bee Element. :

p { padding: 50%; }

oder:

p { padding: 100% 0 0; }

oder:

p { padding-bottom: 100%; }

Dann ist die Größe dieses e388a4556c0f65e1904146cc1a846bee Elements ein Quadrat mit einer Breite und Höhe von 1:1, egal wie breit es ist Der übergeordnete Container ist, dass dieses e388a4556c0f65e1904146cc1a846bee-Element die Proportionen immer gleich halten kann.

Welche Funktion hat diese Funktion, mit der das Verhältnis korrigiert werden kann?

Für die meisten Layouts benötigen wir keine festen Proportionen, aber es gibt eine Ausnahme, und das ist das Bild, denn die Originalgröße des Bildes ist fest. Im herkömmlichen Layout mit fester Breite legen wir bestimmte Breiten- und Höhenwerte für das Bild fest, um sicherzustellen, dass unser Bild einen stabilen Bereich einnimmt Das Bild ist sehr klein. Für eine Bannerwerbung auf dem Mobiltelefon beträgt die Breite beispielsweise 375, unter dem iPhone 7 Plus 414, und es gibt andere Größen wie 360. Was benötigt wird Derzeit handelt es sich nicht um eine feste Größeneinstellung für das Bild, sondern um eine Proportionseinstellung.

hat normalerweise die folgenden Implementierungen:

1. Legen Sie eine Höhe fest und verwenden Sie dann das Attributsteuerelement background-size wie folgt:

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

Der Echtzeiteffekt ist wie folgt:

Sie können sehen, dass bei einer Änderung der Breite immer ein Bild vorhanden ist Bereiche (Breite oder Höhe), die nicht angezeigt werden können.

2. Verwenden Sie die Ansichtsfensterbreiteneinheit vw wie folgt:

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

Wenn die Kompatibilitätsanforderungen nicht sehr hoch sind, verwenden vwEs ist auch eine gute Idee, zumindest ist es einfacher zu verstehen.

Wenn unser Bild jedoch kein Banner ist, sondern einen Abstand von der linken und rechten Seite haben muss, ist unser CSS-Code zu diesem Zeitpunkt etwas umständlich Perfekte Proportionen, wir können CSS3 verwenden 1rem Berechnung: calc()

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

Wenn die Breite des Bildes von beiden Seiten dynamisch unsicher ist, dann

ist derzeit ebenfalls überdehnt, es ist zwar nur ein gewöhnliches und unauffälliges calc() Attribut, aber seine Kompatibilität und Anpassungsfähigkeit sind erstklassig. padding

3. Verwenden Sie den Prozentsatz

wie folgt: padding

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

Zu diesem Zeitpunkt, egal wie die externen Elemente des Wenn sich das Bild ändert, bleibt der Anteil konstant.

2. CSS-Prozentabstand und breitenadaptives Bildlayout

Aber manchmal sind unsere Bilder nicht praktisch, um als Hintergrundbilder dargestellt zu werden, sondern sind inline

, Prozentsatz a1f02c36ba31691bcfe87b2722de723bEs kann auch Die Suchroutine ist relativ fest vorgegeben. Außerhalb des Bildelements ist ein Containerelement mit festem Anteil erforderlich, beispielsweise die folgende HTML-Struktur: padding

<br>

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

-Element ist auch für die Steuerung der Proportionen verantwortlich, und dann wird das Bild mit dem

-Element gefüllt. Der CSS-Code lautet wie folgt: .banner.banner

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

Wirkung Es ist geschafft!

Sehen heißt glauben. Letztes Jahr wurden die Bannerwerbung auf vielen Seiten der mobilen Version der Qidian-Website auf diese Weise implementiert. Den endgültigen Effekt finden Sie im GIF-Screenshot unten (falls das Bild nicht angezeigt werden kann). Sie können einen Kommentar hinterlassen):

Wie Sie sehen, ist das Verhältnis unserer Werbebilder unabhängig von der Breite des Bildschirms festgelegt, es kommt zu keinem Clipping Es wird kein Bereich fehlen und das Layout sieht sehr aufgeräumt aus. Flexibler und robuster.

————-

Eigentlich habe ich aufgrund der Existenz von

Einheiten den praktischen Nutzen von Prozenten immer unterschätzt besser Es ist einfacher, daher habe ich die relevanten Techniken nicht vorgestellt. Da jedoch immer mehr bildbezogene Layouts verarbeitet werden, habe ich festgestellt, dass der praktische Wert des Prozentsatzes

größer ist als gedacht. Er ist auf mehr Szenarien anwendbar als die padding-Einheit und weist eine bessere Kompatibilität auf (die Prozentfunktion wird von IE6+ unterstützt). Das Bild deckt 100 % IE8+-Unterstützung ab. vwvwWenn bei komplexen Layouts die Breite des Bildes nicht fest und anpassungsfähig ist, denken wir uns normalerweise einen Trick aus, der darin besteht, nur die Breite des Bildes festzulegen, zum Beispiel: paddingvw

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

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

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

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

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

<br>

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

相关推荐：<br>

一个CSS+div高度自适应布局模型_html/css_WEB-ITnose

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

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des prozentualen CSS-Auffüllens zum Erstellen eines adaptiven Bildlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!