CSS Background-size and background images fill Div

Background-size and background picture fill Div

In development, it is often necessary to use a picture as a div's background image to fill the div's needs

The value and explanation of Background-size

Background-size a total of three properties, respectively,

Background-size:cover

MDN Document Explanation: Zoom background picture to completely cover the background area, may not be visible in the background picture part. A keyword that's the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn ' t get squished). The image "covers" the entire width or height of the container. When the image and container has different dimensions, the image is clipped either left/right or top/bottom.

The key note here is the two regions of the red, which are 它会保持图片的宽高比 and 当图像和容器具有不同的尺寸时，图像被左/右或顶部/底部裁剪。 will be combined with examples to illustrate

Background-size:contain

MDN Document Explanation: Zoom the background picture to fit completely into the background area, possibly partially blank in the background area. A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn ' t get squished). Image is letterboxed within the container. www.97yingyuan.org when the image and container has different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

The key note here is the two regions of the red, which are 它会保持图片的宽高比 and 当图像和容器具有不同的尺寸时，空区域（左/右/上/右）填充背景色。 will be combined with examples to illustrate

Background-size:width-value,height-value;

Divided into and 固定大小 百分比 and auto , the fixed size is to write dead; auto is to scale the background image proportionally to the background image.

The percentage of the

MDN document explains the description <percentage> value, specifying the percentage of the background picture relative 背景区 (background positioning area). 背景区由background-origin设置, the default is the content area and padding for the box model, or it can be set to only the content area, or it also includes a border. If the attachment is fixed, the back scenic area is the browser visual region (that is, the viewport), excluding the scroll bar. cannot be a negative value.

CSS Background-size and background images fill Div