learning mark
Note that div generally refers to html elements
background-size: contain;
The meaning of contain is that the div container should contain pictures,
When any of the width and height of the div container is smaller than the width and height of the image, the image is proportionally reduced until the height and width are completely placed in the div container. Obviously, there may be no way to cover the div container, and there will be blank spaces.
On the contrary, the width and height of the div container are larger than the width and height of the image, so there is no need to zoom at all.
background-size: cover;
The meaning of cover is that the picture should completely cover the div container
When any of the width and height of the image is larger than the width and height of the div container, the div container is directly covered, and the excess part is cut off
On the contrary, if any of the width and height of the picture is smaller than the div container, the picture will be stretched proportionally until all of it can cover the div container. Obviously, the picture will be deformed.
backgroupd-size: number auto;
Auto means, according to the width scaling ratio, the height is also scaled proportionally
Conversely, auto number, which means that the height is scaled proportionally, and the width is also scaled in equal proportions.
Effect reference: http://www.webhek.com/post/demo/background-size
http://www.cnblogs.com/tugenhua0707/p/5260411.html