[Old method used] Use PADDING-TOP :( PERCENTAGE) to implement responsive background images,

[Old method used] Use PADDING-TOP :( PERCENTAGE) to implement responsive background images,

A simple method for processing background images in a responsive layout is proportional scaling of background images. We know that the height of the element whose width is set to a percentage is automatically adjusted as the width changes, and its aspect ratio remains unchanged. To achieve the same effect in the background image, we must first solve how to maintain the aspect ratio of HTML elements.

Fixed Aspect Ratio

We will use a technique to keep the aspect ratio of an element: Add a vertical padding value to the element, and the percentage of the padding value is used. This is because the percentage of the vertical padding value is determined by the value relative to the width of the contained block [Reference Box model]. This technique was first used in Creating Intrinsic Ratios for Video to create a Video with an inherent ratio and view the demo.

 

 

Suppose we have a 800 * pixel PX image. We need to create an element whose width ratio remains 16: 9 when its width changes. The Code is as follows:

 

<div class="column">  <div class="figure"></div></div>

.column{  max-width: 800px;}.figure{  padding-top: 56.25%;  /* 450px/800px = 0.5625 */}

Try it by yourself. demo

 

Add background image

We have scaled the elements and kept the aspect ratio above. However, if a background image is added, it cannot be scaled along with the element. You also need to add background-size: cover. The disadvantage of using this attribute to fill the background with elements is that IE8 and the following browsers do not support this attribute. To make the effect of IE acceptable, you can use background-position to explicitly display the background image. We must ensure that the image width must be at least the same as the max-width of the element. In this way, the width of the element will never be greater than that of the image. If the element is smaller than the image, the image will be cropped.

 

div.column {  /* The background image must be 800px wide */  max-width: 800px;}figure.fixedratio {  padding-top: 56.25%;  /* 450px/800px = 0.5625 */  background-image: url(http://domain.com/img/sample.jpg);  background-size: cover;  background-position: center;  /* Internet Explorer 7/8 */}

Try again demo

 

Flow Aspect Ratio

We can go further. Suppose we have a wide screen image that is explicitly displayed in a desktop browser. We don't want to use the same aspect ratio on mobile devices, or the image will be small. Or we don't want to use the same height, because the image may be too high.

This effect can be achieved by setting a height for the element with a small percentage value of padding. Suppose our big image is 800 * PX. We plan to reduce the width of the element to PX, and the height of the background image is PX. Now we calculate the attribute values of height and padding-top.

Explicit relationship between two dimensions. Slop corresponds to the padding-top attribute, and start height corresponds to the height attribute, which indicates the height of the element when the width is zero. Adjust the style as follows:

　　

div.column {  /* The background image must be 800px wide */  max-width: 800px;}figure.fluidratio {  padding-top: 10%;  /* slope */  height: 120px;  /* start height */  background-image: url(http://domain.com/img/sample.jpg);  background-size: cover;  background-position: center;  /* Internet Explorer 7/8 */}

Try it. demo