Padding making a picture adaptive layout (CSS percent)

CSS knowledge Point: When the Padding/margin takes the form as a percentage, whether it is left/right, or top/bottom, the parent element is the width of the reference!

One, the CSS percent padding are relative width calculation

In the default horizontal document flow direction, the margin padding percentage values for the vertical direction of the CSS and properties are calculated relative to the width, which is not the same as the percent value of the top bottom attribute.

The reason for this design is explained in my new book (which should be published in a few months), and it is not going to unfold here.

For padding attributes, a percentage of any direction padding is now easy to implement a fixed scale block-level container for the width calculation, for example, assuming there is now an <p> element:

p {padding:50%;}

Or:

P {padding:100% 0 0;}

Or:

p {padding-bottom:100%;}

The <p> element size is a square with a width of 1:1, which is always proportional, regardless of the width of the parent container <p> .

What is the function of this characteristic of a fixed proportion?

For the vast majority of the layout, we do not require a proportional fixed, but in one case, that is, the picture, because the original size of the picture is fixed. In the traditional fixed-width layout, we will ensure that our image occupies a stable position by setting the specific width and height of the image, but in the mobile or in the case of responsive development, the final width of the picture is likely to be uncertain, such as a banner ad on the mobile phone, IPhone7 under the width of 375,iphone7 Plus is 414, there are 360 of the size, it is not necessary to set the image fixed size, but proportional setting.

There are usually some implementations:

1. Fix a height, then use background-size the 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 is always a part of the picture area (width or height) that cannot be displayed and is not a perfect practice.

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 vw is a good idea to use them, at least to make it easier to understand.

However, if our picture is not the banner, but need to distance from the left 1rem and right, at this time, our CSS code will be wordy point, want to maintain the perfect ratio, using the CSS3 calc() calculation:

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

If, the picture distance on both sides of the width is dynamic uncertainty, then, at this time calc() also stretched, but, is just plain ugly padding properties, its compatibility and adaptability are first-class stick.

3. Use padding the percentages as follows:

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

Regardless of how the external elements of the picture change, the proportions are constant.

Second, CSS percent padding and width adaptive picture layout

But sometimes our pictures are not convenient as a background map, but inline , the percentage is also easy to deal with, the pattern padding is relatively fixed, outside the picture element requires a fixed proportion of container elements, such as the following HTML structure:

<p class= "banner" > </p>

.bannerThe element is also responsible for controlling the proportions, then the picture fills .banner the elements, and 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 reached!

Seeing is real, the beginning of last year, the Chinese language network mobile phone version of the banner ads are all so realized, the final effect see the following GIF (if the figure cannot be displayed, can comment on feedback):

As you can see, regardless of the width of the screen, our advertising picture scale is fixed, there will be no clipping, no area is missing, the layout is very flexible, and more robust.

————-

In fact, I have been underestimating padding the actual application value of the percentage, because there is vw the existence of units, after all, understanding vw seems to be more simple, so, has not done the relevant techniques of introduction. However, as the image-related layout processing more and more, I found that the padding practical value of the percentage is larger than the imagination, more than the vw unit applicable scenario, compatibility is better (Percent feature ie6+ support, image 100% covers ie8+ support).

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

img {width:100%;}

At this point the browser by default will keep the picture scale display, the picture width is big, the height is also become larger, the picture width is small, the height also follows together to become smaller. Developers don't seem to care what the picture's true proportions are.

However, this technique has a very bad experience problem, that is, with the page loading, the height of the image will have a change from the height 0 of the image, the visual will have a noticeable element bounce, the code level will have layout recalculation.

So it is necessary to make an agreement on the picture aspect, but at the same time, it seems a bit difficult to make sure the width is adaptive. Remember, if you encounter this demand scenario, there is no padding better way than a percent layout!

Reduce the width of the browser to see the layout effect under different widths, GIF effect is as follows:

This demo difficulty is the image adaptive while maintaining the proportions, and the page refresh without the layout of the stable and not shaking, its core HTML and CSS code as follows:

<p class= "Works-item-t" >  </p>

. 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 direction padding value is used only as a padding-bottom representation, if there text-align is no attribute interference, the element left:0;top:0 can be omitted.

For this picture width 100% container, the percentage value size of the height-proportional scene padding-bottom is the aspect ratio of the picture element, and it is so simple.

However, sometimes, the picture width is not 100% container, for example, the picture width 50% container width, the picture aspect ratio 4:3 , at this time, the CSS vertical direction percentage is 666, as follows:

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

The above is I arrange for everyone, hope in the future will be helpful to everyone.

Related articles:

CSS Login Interface Landscaping

How CSS enables you to enlarge a picture when the mouse slides over a thumbnail image

CSS for mouse trigger effects