CSS3 Object-fit Detailed

Upload avatar when encountered the problem of Avatar deformation, and finally through the object-fit:cover perfect solution. This CSS property can achieve the best and most perfect center auto-cropped image.

Object-fit Understanding

CSS3 background-size appear earlier, you should know some of its supported values, in addition to the value, it also supports several keywords, such as: cover, contain and so on.

Object-fit is similar, but there are some differences, there are 5 values:

. fill {Object-fit:fill;}

. contain {object-fit:contain;}

. cover {object-fit:cover;}

. none {Object-fit:none;}

. scale-down {Object-fit:scale-down;}

The specific meanings of each attribute value are as follows (self-understanding of the vernacular, official interpretation See official website):

• Fill: Chinese explanation "fill". The default value . The replacement content is stretched to fill the entire content box, not guaranteed to maintain the original proportions.
• Contain: Chinese explanation "contains". Maintain the original size ratio. Ensure that the replacement content size must be placed inside the container. Therefore, this parameter may leave a blank inside the container.
• Cover: Chinese interpretation "overwrite". Maintain the original size ratio. Ensure that the replacement content size must be larger than the container size, with at least one width and height consistent with the container. Therefore, this parameter may make the replacement content (slice) part of the area invisible.
• None: Chinese interpretation "none". Maintain the original size ratio. Keep the original size of the replacement content at the same time.
• Scale-down: Chinese explanation "reduced". It is as if none or contain is set in turn, and the result is a smaller size.

Object-fit Property Testing

Let's test the effect of each of the property values shown with the width:200px and width:200px set for each IMG tag, plus the different values of the Object-fit property set, as follows:

Object-fit compatibility

CSS3 Object-fit Detailed