object-fit is an attribute in CSS that controls image adaptation containers. Common values ??include fill, contain, cover, none and scale-down. It is suitable for image display in responsive designs, such as using cover to avoid deformation or blanking of card layout; avatar scenes can be used with object-position to locate focus; when using it, you need to pay attention to the compatibility and layout stability of IE and old Android.

When you display pictures on web pages, especially in responsive designs, you often encounter the problem that the image proportion does not match the container. At this time, using object-fit attribute of CSS can control the display of the image well.

What is object-fit

object-fit is a CSS property that controls how replaceable elements (such as <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175164534698852.jpeg" class="lazy" alt="Using the CSS object-fit property for images" > or <video></video> ) adapt to their container size. It's a bit like background-size of the background image, but the object is the actual image element itself.

Common values ??include:

• fill : stretching and filling the container, which may deform
• contain : Keep scaled to ensure that the entire image is displayed
• cover : Keep proportional cropping to ensure full container, often used in cover drawings
• none : No adjustment, keep the original size
• scale-down : similar to contain , but smaller size will be selected

Common usage scenarios and suggestions

Image list layout: Use cover to avoid blanks or stretches

If you are doing card layout or product picture display, the aspect ratio of each picture may be different. At this time, setting object-fit: cover can keep the image proportion while filling the container, without black edges or being compressed and deformed.

 .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

After processing this, both sides or upper and lower images may be cropped, but the visual effect is more unified.

Avatar or user upload image: cover object-position control focus

Sometimes you want to center the avatar to display, but if the picture is a close-up of the character and you want your face to always appear in the visual area, you can use it in conjunction with object-position .

 .avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: top center;
}

The above example will center the top of the image, suitable for situations where the head content is more important.

Notes and compatibility

Although object-fit has widely supported mainstream browsers, there are still some details to note:

• IE does not support : If you still need to be compatible with IE11, you have to use other solutions, such as simulation with background images and pseudo-elements.
• Some old Android models do not support : projects that need to consider compatibility should be tested.
• Impact layout stability : If the image size is uncertain, it may cause page rearrangement. It is recommended to fix the image container or use aspect-ratio for use.

summary

object-fit is a simple but very practical property that allows you to more flexibly control the display effect of images. Choose the appropriate mode according to different needs, and then cooperate with object-position to achieve more refined control. Basically that's it, but it's easy to ignore its potential in actual development, especially when combined with responsive design.

The above is the detailed content of Using the CSS object-fit property for images. For more information, please follow other related articles on the PHP Chinese website!