Auffüllung zum Erstellen eines adaptiven Bildlayouts (CSS-Prozentsatz)

CSS-Wissenspunkt: Wenn padding/margin einen Wert in Form eines Prozentsatzes annimmt, egal ob links/rechts oder oben/unten, basiert er auf der Breite des übergeordneten Elements als 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 Unabhängig von der Breite seines übergeordneten Containers kann dieses e388a4556c0f65e1904146cc1a846bee-Element immer die gleichen Proportionen beibehalten.

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, auf dem mobilen Endgerät jedoch die endgültige Breite des Bildes 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 dabei benötigt wird Die Zeit ist keine feste Größeneinstellung für das Bild, sondern 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 Teil des Bildbereichs (Breite oder Höhe) nicht angezeigt werden kann, was kein perfekter Ansatz ist.

2. Verwenden Sie die Ansichtsfensterbreiteneinheit vw wie folgt:

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

Wenn die Kompatibilitätsanforderungen nicht sehr hoch sind, ist die Verwendung von vw zumindest ein guter Ansatz leichter zu verstehen sein.

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

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

Wenn die Breite des Bildes auf beiden Seiten dynamisch unsicher ist, wird calc() zu diesem Zeitpunkt ebenfalls gestreckt, aber es ist nur ein gewöhnliches und unauffälliges padding Attribut, seine Kompatibilität und Anpassungsfähigkeit sind ausgezeichnet.

3. Verwenden Sie den Prozentsatz padding wie folgt:

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

Zu diesem Zeitpunkt ist der Anteil konstant, egal wie sich die äußeren Elemente des Bildes ändern.

2. CSS-Prozentabstand und breitenadaptives Bildlayout

Aber manchmal sind unsere Bilder nicht praktisch, um als Hintergrundbilder dargestellt zu werden, sondern sind inline a1f02c36ba31691bcfe87b2722de723b, Prozentsatz paddingEs kann auch lässt sich leicht handhaben. Außerhalb des Bildelements ist ein Containerelement mit festem Anteil erforderlich, beispielsweise die folgende HTML-Struktur: Das Element

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

.banner ist auch für die Steuerung des Anteils verantwortlich. und dann ist das Bild gefüllt. Das .banner-Element ist wie folgt:

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

Der Effekt ist erreicht!

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 sehen Sie bitte 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 den praktischen Anwendungswert von Prozent padding aufgrund der Existenz von vw immer noch unterschätzt. Immerhin sieht das Verständnis aus 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 vw 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. vw

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

img { width: 100%; }

Standardmäßig behält der Browser die Proportionen des Bildes bei. Wenn die Breite des Bildes größer wird, nimmt auch die Höhe zu. Den Entwicklern scheint es egal zu sein, welche tatsächlichen Proportionen das Bild hat.

然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从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实现鼠标触发效果

Das obige ist der detaillierte Inhalt vonAuffüllung zum Erstellen eines adaptiven Bildlayouts (CSS-Prozentsatz). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!