To make the images appear properly on different devices, object-fit, responsive layout and srcset technology are required. 1. object-fit controls the image scaling method. Common values include fill, contain, cover, scale-down, which is suitable for img and video elements; 2. Use @media query to realize layout adjustments under different screens, such as full width on the mobile phone and side-by-side display on the desktop; 3. Use srcset and sizes to let the browser select appropriate image resources according to the viewport to improve loading performance; 4. Pay attention to setting width and height to prevent layout jitter, avoiding misuse of object-fit in the background image, optimizing the quality of the original image and fully testing compatibility.

The proper display of pictures on different devices is an important part of modern web design. It is far from enough to rely on the img tag itself. Combining CSS attributes such as object-fit and responsive skills can truly make the picture "smart" adapt to various screens.

1. Understand the role and usage scenarios of object-fit

object-fit is a key property that controls how an image scales and aligns within its container. It has several commonly used values:

• fill : stretching and filling the container (may deform)
• contain : Keep scaled to ensure the entire image is visible
• cover : Keep proportional cropping to ensure the container is filled
• scale-down : Take the smaller scale in none and contain

For example, if you are making a card component, the pictures inside are highly unified but the sources are different, using object-fit: cover can ensure that the visual consistency will not occur without black edges or deformation.

It should be noted that object-fit is only valid for img elements and video elements, but is not valid for background images. If you are using background-image , use background-size to achieve similar results.

2. Implement responsive image layout in combination with @media query

Images may require different display methods for different screen sizes. For example, on the mobile phone, you want the full width of the picture to be displayed; on the desktop, you may want to display several pictures side by side.

You can write this way:

 img.responsive {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .responsive-card img {
    width: 50%;
    height: auto;
  }
}

In the example above, the image is full width by default, but when the screen width exceeds 768px, it becomes two columns side by side. This practice is very common and is especially suitable for article pages in content management systems.

Also, don't forget to set max-width: 100% to prevent image overflow from containers, which is one of the basic operations of responsive design.

3. Use srcset and sizes to let the browser choose the appropriate image resource

In addition to CSS, HTML can also be optimized. The <img src="/static/imghw/default1.png" data-src="image-small.jpg" class="lazy" alt="Implementing responsive images with CSS properties like object-fit" > tag supports srcset and sizes attributes, allowing you to provide multiple pictures with different resolutions and tell the browser to select the most appropriate resource based on the current viewport size.

Example:

 <img src="/static/imghw/default1.png"  data-src="image-small.jpg"  class="lazy" 
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive image"
>

This code means:

• When the screen is less than 600px, use the full screen width (100vw) to load the picture of the corresponding size;
• Otherwise, load with half width (50vw).

This can reduce unnecessary large image loading and improve performance, especially for mobile users.

4. Frequently Asked Questions and Precautions

• Forgot to set height or width : it can easily cause layout jitter (CLS) and affect the user experience.
• Misuse object-fit on the background image : Remember to use background-size on the background image.
• Ignore image quality : Even if responsive technology is used, if the original image is too large and heavy, it will also affect the loading speed.
• Inadequate testing : Different browsers have slightly different support for object-fit , especially for older IE versions, polyfill can be added if necessary.

Basically that's it. The rational use of object-fit , srcset and media queries can make images perform more naturally on various devices and improve page loading efficiency. Although the details are small, the combination is obvious.

The above is the detailed content of Implementing responsive images with CSS properties like object-fit. For more information, please follow other related articles on the PHP Chinese website!