Background-size do self-adapting background map

Background-size do self-adapting background map

When we do the page layout often encounter this situation when I fixed an element of the size, when the element added to the background when the original size of the background image is very large, when I write the background image is often more than the elements of a large part of us can only see a part of the background map within the element display!

This is my background map.

I have a div to add to this background. The results show that the results are completely different from the design needs.

div{

width:400px;

height:200px;

border:1px solid red;

Background:url (2.jpg) 0 0 no-repeat;

}

<div></div>

Why is there such a situation?

First we need to find out the problem from the above two pictures can see the size of the original image is larger than the width of the element set;

Find out how to handle the problem.

CSS3 provides me with Background-size This property allows me to do a better job of self-adapting the background map.

Background-size provides us with 4 parameters

length/percentage/cover/contain

Length: Sets the height and width of the background image, the first value sets the width, the second value sets the height, and if only one value is set, the second value is set to "Auto".

Percentage: sets the width and height of the background image as a percentage of the parent element. Worth setting is the same as length.

Cover: Expand the background image to be large enough to allow the background image to completely cover the background area. Some parts of the background image may not appear in the background positioning area.

Contain: Expands the image image to the maximum size so that its width and height are fully adapted to the content area.

The above 4 parameters are verified as follows:

<style>
div{width:400px;height:200px;border:1px solid Red;background:url (2.jpg) 0 0 no-repeat;}
. length{background-size:400px 200px;}
. length2{background-size:400px;}
. percentage{background-size:100% 100%;}
. percentage2{background-size:100%;}
. Cover{background-size:cover;}
. cover2{width:1000px;height:200px;border:1px solid Red;background:url (2.jpg) 0 0 no-repeat;background-size:cover;}
. Contain{background-size:contain;}
. Contain2{height:80px;background-size:contain;}
</style>

<div class= "Length" ></DIV>
<div class= "length2" ></DIV>
<div class= "Percentage" ></DIV>
<div class= "Percentage2" ></DIV>
<div class= "Cover" ></DIV>
<p> suddenly found out how the background map didn't show up completely. <br>
cover is proportional to set the background picture, it will set the picture to the maximum degree of <br>
Fit as shown in this figure its height has reached its limit so it won't be able to adapt to the width of the,<br> Just like the latter part of the introduction to cover: Some parts of the background image may not appear in the background positioning area.
</p>
<div class= "Cover2" ></DIV>
<p > The width can be enlarged to the maximum by proportional adaptation, the height is due to the proportion of changes will be hidden out of the </p>
<div class= "contain "></DIV>
<p> to the maximum extent to adapt to the background, also to do a reverse example of comparisons such as </p>
<div class=" Contain2 "></div>

Results of the final implementation

Zoom settings at the pixel level

the pixel scale only sets one parameter when the second parameter is Auto

Percent Scaling settings

percent scaling when only one parameter is set, the second argument is Auto

Cover

Suddenly find out how the background map is not shown completely.
Cover is to set the background image proportionally, it will set the picture to the maximum extent
Adaptation as shown in this figure its height has reached the limit, so it will not do the width of the adaptation,
Just like the latter part of the introduction to cover: Some parts of the background image may not appear in the background positioning area.

To get a better understanding of how we do a wide-reaching limit.

When scaled, the width can be enlarged to the maximum, and the height is partly hidden due to the proportion change.

Contain

To the maximum extent to adapt to the background, likewise to do an opposite example to compare as

Background-size do self-adapting background map