css knowledge point: When padding/margin takes a value in the form of a percentage, whether it is left/right or top/bottom, it is based on the width of the parent element as the reference!
1. CSS percentage padding is calculated relative to the width
In the default horizontal document flow direction, the CSS
margin
and
padding
attributes The percentage values in the vertical direction are calculated relative to the width, which is different from the percentage values of attributes such as
top
and
bottom
.
The reasons for this design will be explained in my new book (which should be published in a few months), so I won’t go into it here.
For the
padding
attribute, the percentage in any direction
padding
is calculated for the width, allowing us to easily implement a fixed-proportion block-level container. For example, Suppose there is now a
element:
p { padding: 50%; }
or:
p { padding: 100% 0 0; }
or:
p { padding-bottom: 100%; }
then this
The element size is a square with a width and height of 1:1. No matter what the width of its parent container is, this
element can always maintain the same proportion.
What is the function of this feature that can fix the proportion?
For most layouts, we do not require a fixed proportion, but there is one exception, and that is the picture, because the original size of the picture is fixed. In the traditional fixed-width layout, we will set specific width and height values for the image to ensure that our image occupies a stable area; but on the mobile terminal or in the case of responsive development, the final width of the image is very small It may be uncertain. For example, for a banner advertisement on the mobile phone, the width under iPhone 7 is 375, under iPhone 7 Plus it is 414, and there are other sizes such as 360. What is needed at this time is not a fixed size setting for the image, but a proportion setting.
Usually have the following implementations:
1. Fix a height, and then use the
background-size
attribute control, as follows:
.banner { height: 40px; background-size: cover; }
The real-time effect is as follows :
You can see that as the width changes, there will always be some image areas (width or height) that cannot be displayed, which is not a perfect approach.
2. Use the viewport width unit
vw
, as follows:
.banner { height: 15.15vw; background-size: cover; }
If the compatibility requirements are not very high, it is also a good idea to use
vw
The approach is at least a little easier to understand.
However, if our image is not a banner, but needs to be
1rem
distance from the left and right sides, at this time, our CSS code will be a little more verbose, and if we want to maintain perfect proportions, Just use CSS3
calc()
to calculate:
.banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover; }
If the width of the image from both sides is dynamically uncertain, then
calc()
also It's very stretched, but it's just the
padding
attribute that is ordinary and inconspicuous, and its compatibility and adaptability are excellent.
3. Use percentage
padding
, as follows:
.banner { padding: 15.15% 0 0; background-size: cover; }
At this time, no matter how the external elements of the image change, the proportion is constant.
2. CSS percentage padding and width adaptive image layout
But sometimes our images are not convenient to be presented as background images, but inline
, percentage
padding
can also be easily dealt with. The search routine is relatively fixed. A fixed-proportion container element is required outside the picture element, such as the following HTML structure:
# The ##.banner
element is also responsible for controlling the proportion, and then the image is filled with the
.banner
element. The CSS code is as follows:
.banner { padding: 15.15% 0 0; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
Seeing is believing. Last year, the banner advertisements on many pages of the Qidian Chinese website mobile version were implemented in this way. For the final effect, please see the gif screenshot below (if the picture cannot be displayed, you can leave a comment and give feedback):
————-
In fact, I have always underestimated the practical application value of percentage
padding
, because of the existence of
vw
units, after all Understanding
vw
seems to be simpler, so I haven’t introduced related techniques. However, as more and more image-related layouts are processed, I found that the practical value of percentage
padding
is greater than imagined, and it is applicable to more scenes than
vw
units, and is more compatible. Better (percentage feature is supported by IE6, 100% coverage of pictures is supported by IE8).
img { width: 100%; }
然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从
0
到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。
所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比
padding
布局更好的做法!
缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下:
此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下:
.works-item-t { padding-bottom: 133%; position: relative; } .works-item-t > img { position: absolute; width: 100%; height: 100%; }
可以看到,当把垂直方向
padding
值只使用
padding-bottom
表示的时候,如果没有
text-align
属性干扰,
元素的
left:0;top:0
是可以省略的。
对于这种图片宽度100%容器,高度按比例的场景,
padding-bottom
的百分比值大小就是图片元素的高宽比,就这么简单。
但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比
4:3
,此时,CSS垂直方向百分比就666了,如下:
.img-box { padding: 0 50% 66.66% 0; }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
The above is the detailed content of padding to create adaptive image layout (CSS percentage). For more information, please follow other related articles on the PHP Chinese website!