Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to calculate CSS percentage padding". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to calculate the CSS percentage padding.

1. CSS percentage padding is calculated by relative width

In the default horizontal document flow direction, the vertical percentage values of the CSS margin and padding attributes are calculated relative to the width, which is different from the percentage values of top, bottom, and so on.

The reason for this design will be explained in my new book (which should be published in a few months), which will not be unfolded here.

For the padding attribute, the percentage padding in any direction now allows us to easily implement a fixed-scale block-level container for width calculation. For example, suppose there is an element:

Div {padding: 50%;}

Or:

Div {padding: 100% 00;}

Or:

Div {padding-bottom: 100%;}

The size of the element is a square with a width and height of 1:1, and the proportion remains the same regardless of the width of the parent container.

What is the function of this characteristic of fixed proportion?

For the vast majority of layouts, we do not require a fixed proportion, but there is one exception, 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 picture to ensure that our image occupies a stable area. However, on the mobile side or in the case of responsive development, the final width of the image is likely to be uncertain. For example, a billboard advertisement on the mobile phone shows that the width is 375 under iPhone7, 414 for iPhone 7 Plus, and 360. at this time, what is needed is not a fixed size setting for the image, but a scale setting.

There are usually some implementations as follows:

1. Fix a height, and then use the background-size property to control it, 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 areas of the picture (width or height) that cannot be displayed, which is not perfect.

two。 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, or at least it is easier to understand.

However, if our picture is not a full bar, but needs to be away from the left and right 1rem, at this point, our CSS code will be more verbose, and if we want to maintain the perfect ratio, we will use CSS3 calc () to calculate:

.banner {height: calc (0.1515 * (100vw-2rem)); background-size: cover;}

If the width of the distance between the two sides of the picture is dynamically uncertain, calc () is also stretched at this time, but it is precisely the ordinary and unattractive padding attribute, and its compatibility and adaptability are excellent.

3. Use percentage padding, as follows:

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

At this time, no matter how the external elements of the picture change, the proportion is constant.

Second, CSS percentage padding and width adaptive picture layout

But sometimes our pictures are inconvenient to present as background images, but inline.

The percentage padding is also easy to deal with, and the formula is relatively fixed. A fixed proportion of container elements is required outside the image elements, such as the following HTML structure:

The .banner element is also responsible for controlling the scale, and then the image is populated with the .banner element. The CSS code is as follows:

.banner {padding: 15.15% 00; position: relative;}. Banner > img {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

The effect will be achieved!

Seeing is believing. This is how the full-bar ads on many pages of the mobile version of the Chinese website were implemented last year. The final effect is shown in the gif screenshot below (if the image cannot be displayed, you can comment on it):

As you can see, no matter how wide the screen is, the proportion of our advertising pictures is fixed, there will be no clipping, there will be no missing areas, and the layout will be very flexible and more robust.

-

In fact, I have always underestimated the practical value of percentage padding because of the existence of vw units, after all, it seems easier to understand vw, so I have never introduced the relevant techniques. However, as more and more image-related layouts are processed, I find that percentage padding is more practical than expected, more suitable for scenarios than vw units, and better compatibility (percentage feature IE6+ support, image 100% coverage IE8+ support).

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

Img {width: 100%;}

At this time, the browser will keep the picture scale displayed by default. When the width of the picture becomes larger, the height becomes larger; when the width of the picture becomes smaller, the height becomes smaller. Developers don't seem to need to care about the true scale of the picture.

However, there is a very bad experience problem with this technique, that is, as the page loads, the height occupied by the image will change from 0 to the computing height, and there will be obvious element jumps visually. There will be layout recalculation at the code level.

Therefore, it is necessary to agree on the height and width of the picture at the same time, but at the same time to ensure that the width is self-adaptive, it seems a bit difficult. Remember, if you encounter such a demand scenario, there is no better approach than a percentage padding layout!

You can click here: need to maintain the picture proportion and width adaptive padding to achieve demo

By narrowing the browser width, you can see the layout effect under different widths. The screenshot of the Gif effect is as follows:

The difficulty of this demo is that the image adapts and keeps the proportion at the same time, and there is no stable layout when the page is refreshed. The core HTML and CSS codes are as follows:

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

As you can see, when the vertical padding value is represented only by padding-bottom, if there is no interference from the text-align attribute

The left:0;top:0 of the element can be omitted.

For this kind of scene with 100% width and proportional height, the percentage value of padding-bottom is the aspect ratio of the image element. It's as simple as that.

However, sometimes, the picture width is not 100% container width. For example, if the picture width is 50% container width and the picture aspect ratio is 4:3, the percentage of CSS vertical direction is 666%, as follows:

Img-box {padding: 050% 66.66%;} at this point, I believe you have a deeper understanding of "how to calculate the CSS percentage padding". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.