The CSS object-fit Property
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
| Values |
Description |
| fill |
This is default. The image is resized to fill the given
dimension. If necessary, the image will be stretched or squished
to fit
|
| contain |
The image keeps its aspect ratio, but is resized to fit within
the given dimension
|
| cover |
The image keeps its aspect ratio and fills the given dimension.
The image will be clipped to fit
|
| none |
The image is not resized |
| scale-down |
the image is scaled down to the smallest version of none or
contain
|
Live Testing
- Fill
- Contain
- Cover
- None
- Scale-down
