margin
und padding
relativ Bei der Breitenberechnung unterscheidet sich dieser vom Prozentwert von Attributen wie top
und bottom
.
<p>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.
<p>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 <p>
Element. :
p { padding: 50%; }
p { padding: 100% 0 0; }
p { padding-bottom: 100%; }
<p>
Elements ein Quadrat mit einer Breite und Höhe von 1:1, egal wie breit es ist Der übergeordnete Container ist, dass dieses <p>
-Element die Proportionen immer gleich halten kann. <p>Welche Funktion hat diese Funktion, mit der das Verhältnis korrigiert werden kann? <p>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. <p> hat normalerweise die folgenden Implementierungen: <p><p><p>1. Legen Sie eine Höhe fest und verwenden Sie dann das Attributsteuerelement background-size
wie folgt: .banner { height: 40px; background-size: cover; }
vw
wie folgt: .banner { height: 15.15vw; background-size: cover; }
vw
Es ist auch eine gute Idee, zumindest ist es einfacher zu verstehen. <p>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; }
calc()
Attribut, aber seine Kompatibilität und Anpassungsfähigkeit sind erstklassig. padding
3. Verwenden Sie den Prozentsatz <p> wie folgt: padding
.banner { padding: 15.15% 0 0; background-size: cover; }
<img>
Es 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>
.banner
.banner
.banner { padding: 15.15% 0 0; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
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
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: padding
vw
<p><p>此时浏览器默认会保持图片比例显示,图片宽度大了,高度也跟着一起变大;图片宽度小了,高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。
<p>然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从0
到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。<p>所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比padding
布局更好的做法!<p>缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下:<p><p>此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
属性干扰,<img>
元素的left:0;top:0
是可以省略的。<p>对于这种图片宽度100%容器,高度按比例的场景,padding-bottom
的百分比值大小就是图片元素的高宽比,就这么简单。<p>但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比4:3
,此时,CSS垂直方向百分比就666了,如下:.img-box { padding: 0 50% 66.66% 0; }
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!