. 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 property value are as follows:
- 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 containis set in turn, and the result is a smaller size.
CSS3 Image Processing Method Object-fit
