Detailed explanation of CSS percentage padding to create image adaptive layout-JS Tutorial-php.cn

This article mainly shares with you a detailed explanation of CSS percentage padding to create an adaptive image layout. 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 parent element. The width is 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%; }

Copy after login

or:

p { padding: 100% 0 0; }

Copy after login

Or:

p { padding-bottom: 100%; }

Copy after login

Then the size of this  element 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 that the ratio must be fixed, 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 is 375 under iPhone 7, 414 under iPhone 7 Plus, and 360. In this case, what is needed 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 to control, As follows:

.banner {
 height: 40px;
 background-size: cover;
}

Copy after login

The real-time effect is as follows:

You can see that as the width changes, there will always be part of the picture area (width or height ) 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;
}

Copy after login

If the compatibility requirements are not very high , using vw is also a good idea, at least it will be 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 bit 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;
}

Copy after login

If the width of the image from both sides is dynamically uncertain, then, At this time calc() is also stretched, but it is just the ordinary padding attribute that has great compatibility and adaptability.

3. Use percentage padding, as follows:

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

Copy after login

At this time, no matter how the external elements of the picture change, the proportion All are 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> , 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:

<br/>

Copy after login

# The ##

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

Copy after login

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

Copy after login

The effect is achieved!

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

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.

————-

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 IE6+ support, pictures 100% coverage IE8+ support).

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

Copy after login

此时浏览器默认会保持图片比例显示，图片宽度大了，高度也跟着一起变大；图片宽度小了，高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。

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

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

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

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

<br/>

Copy after login

<p class="works-item-t">
  <img src="./150x200.png">
</p>

Copy after login

.works-item-t {
 padding-bottom: 133%;
 position: relative;
}
.works-item-t > img {
 position: absolute;
 width: 100%; height: 100%;
}

Copy after login

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img>元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：

.img-box {
 padding: 0 50% 66.66% 0;
}

Copy after login

CSS3自适应全屏焦点图切换的特效怎么做

响应式和自适应有什么区别

The above is the detailed content of Detailed explanation of CSS percentage padding to create image adaptive layout. For more information, please follow other related articles on the PHP Chinese website!