Understanding Background-size in CSS3 (proportional scaling for responsive images)

2016-03-10 01:40 by voidness, 7463 reading, 8 Reviews, favorites, compilation

Understanding Background-size in CSS3 (proportional scaling for responsive images)

Read Catalogue

• Basic properties of Background-size
• Set a fixed width and height for the picture
• Fixed width 400px and height 200px-using background-size:400px 200px zoom settings
• Fixed width 400px and height 200px-using background-size:400px, the second parameter is automatically converted to auto
• Fixed width 400px and height 200px-zoom settings using background-size:100% 100%
• Fixed width 400px and height 200px-using background-size:100% zoom settings
• Use the property cover to set the background picture
• Use the property contain to set the background picture
• Set the Width property to the picture 100%; highly adaptive
• Use another way to solve the problem of adaptive image--Image adaptive problem
• Use Padding-top: (percentage) for responsive background images

Back to Top

Basic properties of Background-size

background-size: You can set the size of the background image, this property is CSS3 in the mobile side of the use of a lot, such as the most common place in the response layout, such as the previous project has a carousel of pictures, in order to adapt to different size resolution of the picture, We need to use the media query in CSS3 to set the width and height for different resolutions, although this is a way to solve the problem, but the solution is not too good, and cumbersome, of course, I also want to use the percentage to set the size of the picture directly, such as width: 100%,height (height): 100%; However, the setting of the height of the picture, such as 100% does not take effect, the picture is not displayed, because no specific height value, the browser rendering is not high, so the solution was to use the media query in CSS3 to really scale different height (height) of different resolutions Today, we re-learn the background-size this specific attribute value, and use the new method to solve the background image adaptation for the responsive layout.

Extent of browser support: ie9+, firefox4+, opera, Chrome, safari5+;

Basic Syntax: Background-size:length | Percentage | Cover | contain;

One: Length

The property value is set to the width and height of the background image, the first value is the width, and the second value is the set height. If only the first value is set, then the second value is automatically converted to "auto";

Two: Percentage

This property sets the width and height of the picture as a percentage of the parent element, the first value is the width, and the second value is the height. If only one value is set, the second value is set to "auto";

Three: Cover

Expand the background image to be large enough to allow the background image to completely cover the background area.

Four: Contain

Extend the image to the maximum size so that the width and height fit perfectly into the content area.

Back to Top

Set a fixed width and height for the picture

The next side of my door to do some demo to achieve the above several properties of the basic use of values;

The HTML code for the basic artwork is as follows:

<h3> Original </h3><class= "Images"><src= "/http/ Images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg " Width=" 100% "/ ></div>               

The effect is as follows:

The code for setting the fixed width and height of the picture is as follows:

For example, set the fixed width of 400px and height 200px after the picture;

The HTML code is as follows:

<h3> Fixed width 400px and height 200px picture </h3><class= "Bsize1"> </Div>

The CSS code is as follows:

. bsize1 {     width:400px;      Height:200px; background: URL ("http://images2015.cnblogs.com/blog/561794/201603/ 561794-20160310002800647-50077395.jpg ") No-repeat; border:1px solid red; overflow: hidden;}         

The effect is as follows:

Back to Top

Fixed width 400px and height 200px-using background-size:400px 200px zoom settings

2. Fixed width 400px and height 200px-using background-size:400px 200px zoom setting;

The HTML code is as follows:

<h3> Fixed width 400px and height 200px-use background-size:400px 200px zoom settings </h3><class = "Bsize1 bsize2"></div>          

The CSS code is as follows:

. bsize2 {         background-size: 400px 200px;  } 

The effect is as follows:

Back to Top

Fixed width 400px and height 200px-using background-size:400px; Zoom settings

3. Fixed width 400px and height 200px-using background-size:400px, the second parameter is automatically converted to auto;

The HTML code is as follows:

<h3> Fixed width 400px and height 200px-use background-size:400px, zoom settings </h3><class= "Bsize1 bsize3"></div>          

The CSS code is as follows:

. bsize3 {         background-size: 400px;} 

The effect is as follows:

Back to Top

Fixed width 400px and height 200px-zoom settings using background-size:100% 100%

4. Fixed width 400px and height 200px-using background-size:100% 100% zoom setting

The HTML code is as follows:

<h3> Fixed width 400px and height 200px-use background-size:100% 100% zoom settings </h3><class = "Bsize1 bsize4"></div>          

The CSS code is as follows:

. bsize4 {        background-size:100% 100%;  } 

The effect is as follows:

Back to Top

Fixed width 400px and height 200px-using background-size:100% zoom settings

5. Fixed width 400px and height 200px-use background-size:100% 's zoom settings.

The HTML code is as follows:

<h3> Fixed width 400px and height 200px-use background-size:100% zoom settings </h3><class= " Bsize1 bsize5 "></div>          

The CSS code is as follows:

. bsize5 {         background-size: 100%;  } 

As shown below:

Back to Top

Use the property cover to set the background picture

6. Use the property cover to set the background picture.

The HTML code is as follows:

<h3> Use attribute cover to set the background picture </h3><class= "Bsize1 cover"></ Div>          

The CSS code is as follows:

. cover {        background-size:cover;} 

The effect is as follows:

Back to Top

Use the property contain to set the background picture

7. Use the property contain to set the background picture.

The HTML code is as follows:

<h3> Use attribute contain to set the background picture </h3><class= "Bsize1 contain"></ Div>          

The CSS code is as follows:

. contain {        background-size:contain;  } 

The effect is as follows:

Back to Top

Set the Width property to the picture 100%; highly adaptive

8. Below we use the picture to do, do not use the background picture and so on, to the picture to set the property width = 100%, its height will be adaptive. The following HTML code:

<h3> To set the picture to a property width of 100%, you can adapt the picture </h3><class= "Bsize-padding"  ><src= "http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width= "100%"/></div>           

The effect is as follows:

Back to Top

Use another way to solve the problem of adaptive image--Image adaptive problem

9. Use another way to solve the problem of image adaptation--image adaptive problem, picture width setting 100%, page loading will have a high collapse problem, you can use Padding-top to set the percentage value to achieve adaptive Padding-top = (height of the image/width of the picture) *100;

The following HTML code:

<H3> Picture adaptive problem, picture width setting 100%, page load there will be a high collapse problem</h3><p> can use Padding-top to set percent values for adaptive padding-top = (height of picture/width of picture) *100< Span style= "COLOR: #0000ff" ></p><div class = "cover-paddingtop" >  <img src= "/HTTP/ Images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg "/ > </div>   

The CSS code is as follows:

. cover-paddingtop {       position: relative;        Padding-top: 50%; overflow: hidden;} . Cover-paddingtop img{ width:100%; position: absolute; top:0;}   

The effect is as follows:

Back to Top

Use Padding-top: (percentage) for responsive background images

10. Use Padding-top: (percentage) for responsive background images

I know that when dealing with the responsive layout, background images are scaled, such as the use of images above, using introduced images, then set their width property is 100%;, the height will be scaled, this is the picture, but if it is a background picture? The common practice in the project before my door is to do according to the method of CSS3 media query, according to different resolution of the phone, to scale the height of the background map, although this way can solve the problem, but this way to set up by human flesh is not good, also very cumbersome, Today I come to learn to use padding-top such a property to set up;

implementation of the basic principle: will be used to maintain the aspect ratio of the elements of the technique, add the vertical direction of the padding-top value of the element, using the form of a percentage, the value is relative to the width of the element, such as the width of a picture above me is 1024px, height is 316px ; so now the

Padding-top = (Height/width) * 100% = (316/1024) * 100% = 30.85%;

but only for the image height and width scaling release vessel Not enough, we must also add background-size:cover, so that the property to fill the background of the element, but IE8 and the following does not support the property, so in order to compatible with the browser under IE, We also need to add an attribute background-position:center; At the same time, I want to make sure that the width of the image is equal to the width of the parent container; so the following HTML code:

<h3> Using Padding-top to achieve responsive images (image width is 1024px, height is 316px)</H3<class= "column" <class= "Figure"></div</div>    

The CSS code is as follows:

. column{        max-width: 1024px;} . Figure {         padding-top:/**/ background: URL ("http://images2015.cnblogs.com/blog/ 561794/201603/561794-20160310002800647-50077395.jpg ") No-repeat; background-size:cover; background-position:Center;}        

The effect is as follows:

Note: The specific effect can copy the code to the browser to run the next ~

Reproduced from:: http://www.cnblogs.com/tugenhua0707/

Understanding Background-size in CSS3 (proportional scaling for responsive images)