Use padding instead of height to achieve high proportional adaptation of background image

This post consists of: http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionately/

Height percentage

When the height is set to a percentage, its height is based on the parent element, set to 50%, that is, the height of the element is set to the height value of the parent element x 50%.

However, when the height is set to a percentage, it is often not effective! The height remains at 0, why is this? The simple truth is that the height of the parent element is also 0.

So that's how the browser calculates the width and height.

The browser considers the width of the browser window when calculating the effective width, and automatically tiles the page content horizontally to fill the window if no absolute width is set.

However, the browser does not calculate the height of the content unless the content exceeds the window height to form a scroll bar.

or set an absolute height for the page, otherwise the browser will pile up the content as a document stream, which is the default value of auto for the height value.

So if you set the percentage height based on the default auto, it must be an invalid height.

Obviously you just need to specify an absolute height for the parent element, and there's no problem.

However, in practical applications, height is usually not fixed, do not write the height of death, what solution?

This can be used, this article introduces you to the method, and then look down ...

Use padding instead of height

Why use padding instead of height?

The padding, as the name implies, is an empty area between the element's border and the element's content.

Therefore, the height of the element increases as the inner margin becomes larger.

Imagine if the content of an element is empty and the height of the padding is the height of the element?

The answer is a must!

So can we, replace the height with the padding and set its value as a percentage?

The answer is also necessary!

Here may be some friends have doubts, if set to a percentage, the same is based on the parent element as a percentage of it?

Yes, that's right, based on the parent element, but内边距 padding 是基于父元素的宽度的百分比的内边距

Pay attention to the point 基于宽度 !

So either padding-left and Padding-right or Padding-top and Padding-bottom are based on the percentage of the parent element's width.

When the theory is over, let's practice.

Practical use

Here is an example of what is actually going to happen:

When you add a picture to a page, you usually need to set the width of the picture to a percentage (the IMG tag itself is proportionally scaled), if you want the width and height of the image to be adaptive.

What if you can't use an IMG tag (using a DIV tag to add a picture to a background image)?

Next we will use padding to achieve this demand.

So the question comes again ...

If you use padding instead of height (because it is a substitute for height, so use padding-top or padding-bottom one of them), how should the percentages be set?

First of all, we need to calculate the width and height ratio of the image, the case of this paper uses a 640x400 picture, the aspect ratio is 1.6

Assuming the width of the picture is set to 50%, then the height of the picture is 50%/1.6 = 31.25%

So the height of the picture is scaled proportionally基于父元素宽度的 31.25%

Take a look at the actual application.

Html

<div class="autoHeightDiv"></div>

Css

.autoHeightImg {    width: 50%;}.autoHeightDiv {    width: 50%;    height: 0;    padding-top: 31.25%;    background-image: url(4.jpg);    background-repeat: no-repeat;    background-size: 100% 100%;}

Insert an original image (scaled with an IMG tag) as a comparison

This is a scale-up effect that uses padding instead of height

As can be seen, the height slightly will have a slight deviation, less than 0.01%, can almost ignore the forget!

This requires the implementation of the code is relatively simple, of course, using Padding-top and Padding-bottom are, as can be achieved, the same effect.

Use padding instead of height to achieve high proportional adaptation of background image