padding to create adaptive image layout (CSS percentage)

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 marginand paddingattributes The percentage values in the vertical direction are calculated relative to the width, which is different from the percentage values of attributes such as topand 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 paddingattribute, the percentage in any direction paddingis 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-sizeattribute 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 vwThe approach is at least a little easier to understand.

However, if our image is not a banner, but needs to be 1remdistance 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 paddingattribute 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 paddingcan 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; }

padding , because of the existence ofvw units, after all Understandingvw 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 percentagepadding is greater than imagined, and it is applicable to more scenes thanvw 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; }

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

相关文章：

css登录界面美化

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

css实现鼠标触发效果

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!