If none is used, the image
will remain the original size. Fill will deform
the contain and not fill it up, but
the cover will be invariant. After cropping, the image will lose the edge content, but the main body will be retained.
Scale-down and contain are quite similar.
.object-fit-cover{
height: 100%;
width: 100%;
object-fit: cover;
}
Among them: the attribute values of object-fit are:
- fill - default value. Resizes the replaced content to fill the element's content box. If necessary, the object will be stretched or squeezed to fit.
- contain - scales the replaced content to maintain its aspect ratio while placing it within the element's content box.
- cover - Resizes the replacement content to maintain its aspect ratio while filling the element's entire content box. The object will be cropped to fit.
- none - Do not resize the replaced content.
- scale-down - scale content as if no content was specified or as if content were included (will result in smaller concrete object sizes)