background-size: The choice of cover and contain depends on content priority. 1. Cover the image is scaled in a proportional manner to ensure that the entire container is covered, and some content may be cropped, which is suitable for scenes where the background is only decorative and the area needs to be filled; 2. Contain the image is scaled in a proportional manner to ensure that the image content is displayed in a complete manner, and may leave blank space, which is suitable for scenes where the image content is important and cannot be cropped; 3. When using it, you should judge based on specific needs, and if necessary, pair it with background-position to control the crop position to ensure a reasonable visual center of gravity.

When you want the background image to be fully displayed in the element, but don't want it to deform, background-size: cover and contain are the two most commonly used options. They can all automatically adjust the size of the picture, but the effects are completely different. Using the wrong one may be in vain.

When to use cover

cover means "cover the entire container", and the browser will scale the image in proportion to ensure that it completely covers the background area. If the aspect ratio of the image is inconsistent with the container, it will be cut partly.

Applicable scenarios:

• The background image is just a decoration, the content can be cut out without affecting reading
• Hope the background fills the entire area without leaving any blank space

For example, when making a full-screen background page, or when emphasizing visual impact in card-style design, it is appropriate to use cover .

 .container {
  background-size: cover;
}

?? Note: If you use cover in a container with large height changes (such as uncertain text content), it may cause the key parts of the image to be cut off. At this time, you should consider whether it is really suitable.

When to use contain

contain means "including all the contents of the picture". The browser will scale the picture in a similar way to ensure that the entire picture is displayed and may leave blank areas.

Applicable scenarios:

• The content of the picture is important and cannot be cut
• Fixed or controlled container size
• For example, logo display, icon background, product picture display, etc.

 .logo-box {
  background-size: contains;
}

For example: you set a circular logo for a square div as the background image. If you use cover , the logo may be cut into an ellipse; and use contain , although there are gaps around, the logo retains the shape intact.

How to choose? View content priority

Choosing cover or contain is actually a trade-off between "filling the space" and "preserving the integrity of the content".

• If the background image is just a sense of atmosphere, the focus is not on the image itself → choose cover
• If the image is the core of the information, you cannot miss edges and corners → choose contain

Sometimes you can also use background-position to control the crop position, such as centering the cover image:

 .container {
  background-size: cover;
  background-position: center;
}

This way, even if the picture is cropped, the visual center of gravity can be ensured in the middle.

Basically that's it. These two properties seem simple, but they can only work if they are used in the right place.

The above is the detailed content of Using CSS Background-size: cover and contain effectively. For more information, please follow other related articles on the PHP Chinese website!