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 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 <p></p> element:

p { padding: 50%; }

or:

p { padding: 100% 0 0; }

or:

p { padding-bottom: 100%; }

then this <p> </p>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 <p></p> 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<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/118/027/fd1fd8b5da689c087b7559dd0565c11f-0.gif?x-oss-process=image/resize,p_40" class="lazy" alt="padding to create adaptive image layout (CSS percentage)" > , percentagepadding 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:

<p class="banner">
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/118/027/fd1fd8b5da689c087b7559dd0565c11f-0.gif?x-oss-process=image/resize,p_40"  class="lazy"  banner.jpg alt="padding to create adaptive image layout (CSS percentage)" >
</p>

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

The effect is achieved! <p></p>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): <p> </p>

You can see that no matter how wide the screen width is, the ratio of our advertising images is fixed, there will be no clipping, no missing areas, and the layout will look very neat. Flexible and more robust. <p></p>————-<p></p>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).

For complex layouts, if the width of the picture is not fixed and adaptive, we usually think of a trick, which is to only set the width of the picture, for example:

img { width: 100%; }

This By default, the browser will keep the picture proportional display. When the width of the picture becomes larger, the height will also increase; when the width of the picture becomes smaller, the height will also decrease. Developers don't seem to care what the actual proportions of the image are. <p></p>

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

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

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

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

<p class="works-item-t">
  <img  src="/static/imghwm/default1.png"  data-src="./150x200.png"  class="lazy"   alt="padding to create adaptive image layout (CSS percentage)" >
</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 alt="padding to create adaptive image layout (CSS percentage)" >元素的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!