Background-size in CSS3 (proportional scaling of responsive images ),

Background-size in CSS3 (proportional scaling of responsive images ),
Basic Attributes of background-size

Background-size: You can set the size of the background image. This attribute is in css3 and is used in many places on the mobile end. For example, when you perform a responsive layout, for example, I have carousel images in my previous project. To adapt to images of different sizes and resolutions, we need to use media queries in css3 to set the width and height for different resolutions, although this method can solve the problem, the solution is not very good and cumbersome. Of course, I also want to directly set the image size using percentages, such as width (width ): 100%, height (height): 100%; but it does not take effect when the image height is set to 100%. The image is not displayed because the specific height value is not set, the browser does not have a height when rendering, so the solution was to use the media query in css3 to zoom in to different heights (heights) based on different resolutions ).

Browser support: IE9 +, Firefox4 +, opera, chrome, safari5 +;

Basic Syntax: background-size: length | percentage | cover | contain;

I. length

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

Ii. percentage

This attribute sets the width and height of the image as the 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 ";

Iii. cover

Extend the background image to a large enough size to completely overwrite the background image.

Iv. contain

Extend the image to the maximum size to make the width and height fully fit the content area.

Set the image with a fixed width of PX and a height of PX

1 <div class="bsize1"></div>

1 .bsize1 {2      width:400px;3      height:200px;4      background: url("1.jpg") no-repeat;5      border:1px solid red;6      overflow: hidden;7   }

Fixed width 400px and height 200px-use background-size: 400px 200px scaling settings or use background-size: 100% 100% scaling settings

1 <div class="bsize1 bsize3"></div>

1 .bsize3 {2          background-size: 400px;3         /*background-size:100% 100%;*/4  }    

Fixed width 400px and height 200px-use background-size: 100% for scaling settings

1 <div class="bsize1 bsize5"></div>

1 .bsize5 {2          background-size: 100%;3   }

 

Use property cover to set the background image

1 <div class="bsize1 cover"></div>

.cover {        background-size:cover; }

Use attribute contain to set the background image

<div class="bsize1 contain"></div>

.contain {        background-size:contain;  }

Set the width attribute to 100% for the image. The height is adaptive.

If the background image is not used, set the attribute width = 100% for the image, and its height will be adaptive. The following HTML code:

<div class="bsize-padding"></div>

Using another method to solve the problem of image self-adaptation-image self-adaptation

When the image width is set to 100%, the page will collapse in height. You can use padding-top to set the percentage value for adaptive padding-top = (Image Height/image width) * 100;

<P> you can use padding-top to set the percentage value for adaptive padding-top = (Image Height/image width) * 100 </p> <div class = "cover-paddingTop">  </div>

.cover-paddingTop {       position: relative;       padding-top: 50%;        overflow: hidden;  } .cover-paddingTop img{      width:100%;      position: absolute;      top:0;  }

Use padding-top :( percentage) to implement responsive background images

Basic Principle of implementation:We will use the technique to keep the aspect ratio of an element, and add the vertical padding-top value for the element. The percentage is used. This value is determined by the aspect ratio of the element, for example, if the width of an image above is PX and the height is pixel PX

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

However, only scaling the image height and width is not enough. We must add background-size: cover to fill the background with elements, however, IE8 and below do not support this attribute. Therefore, to be compatible with browsers under IE, we need to add a property background-position: center; at the same time, we must ensure that the maximum width of the image is equal to the width of the parent container;The following HTML code is as follows:

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

.column{        max-width: 1024px; } .figure {         padding-top:30.85%; /* 316 / 1024 */         background: url("6.jpg") no-repeat;          background-size:cover;          background-position:center;    }