Responsive picture design can be achieved through a variety of techniques. 1. Use max-width and height: auto to ensure that the picture is automatically scaled and maintained in proportion, which is suitable for most content websites; 2. Use object-fit to control the filling method, such as cover, contain, fill, which is suitable for fixed-size containers; 3. Use background-size to process the background image and control the focus with background-position; 4. Use srcset to achieve multi-resolution adaptation to improve performance and display effects. Each method has its applicable scenarios and precautions.

Responsive scaling of images is a common but critical issue in web design. To make the pictures appear naturally, clearly without destroying the layout on different devices, width: 100% is not enough. Only by mastering several practical skills can you truly achieve flexible control.

Use max-width and height: auto combination

This is the most basic and most commonly used method. Setting img { max-width: 100%; height: auto; } ensures that the image does not exceed its container width while maintaining the original aspect ratio.

• The picture will automatically shrink to fit the screen, but will not be deformed by stretching and deforming
• This combination is very friendly to most content websites (such as blogs)
• Be careful not to miss height: auto , otherwise it may lead to high fixed and proportional imbalance

This method is suitable for cases where the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175200050841297.png" class="lazy" alt="Techniques for Responsive Image Scaling in CSS" > tag is directly embedded, and is also suitable for most scenarios outside the background image.

Use object-fit to control image filling method

When the image needs to fill a container of fixed size, using object-fit allows for more fine control of the presentation. Common values ??include:

• object-fit: cover : keep the scale centered crop, suitable for avatar or cover image
• object-fit: contain : Full display of pictures, with blank space around, suitable for gallery display
• object-fit: fill : Force fill container, may deform

 img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

This method is very suitable for unified processing of image areas in card layouts, but be careful about compatibility issues with older browsers (IE does not support them).

Responsive background image: the wonderful use of background-size

For pictures used as background, it is recommended to use background-size to achieve responsive effects:

• background-size: cover : Similar to object-fit: cover , commonly used in banner or full-screen background
• background-size: contain : guaranteed to be fully displayed, suitable for logo or icon background

Paired with background-position you can better control the focus position, such as background-position: center top can prevent the character's head from being cut.

This type of practice is especially important on mobile because the screen proportions are diverse and the cropping strategy will affect the visual focus.

Multi-resolution adaptation with srcset (advanced)

If you want to load images of different sizes according to the pixel density of different devices, you can combine HTML's srcset attribute and CSS media query:

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy"
     srcset="medium.jpg 1024w, large.jpg 1920w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Responsive image">

This allows the high-definition screen to load larger images, and save traffic with small images in low bandwidth environments. Although the configuration is a little more complex, it is well worth using in performance-sensitive projects.

These techniques can basically cover most of the requirements of responsive images if used alone or in combination. The key is to choose the appropriate method based on the specific scenario, rather than just using templates. Basically all is it, not complicated but it is easy to ignore details.

The above is the detailed content of Techniques for Responsive Image Scaling in CSS. For more information, please follow other related articles on the PHP Chinese website!