CSS percent padding to achieve proportional fixed image adaptive layout

This article turns from Zhang Xin Yu (great God's many articles have read, write very good, clear, praise) of the https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/

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 <div> element:

div {padding:50%;}

Or:

div {padding:100% 0 0;}

Or:

div {padding-bottom:100%;}

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

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.

3. Use padding the percentages as follows:

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

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:

<div class= "banner" >  </div>
.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;}

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!

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

CSS percent padding to achieve proportional fixed image adaptive layout