WikiGalaxy
CSS Object Fit
Introduction:
The CSS object-fit property is used to specify how an element, such as an image or video, should be resized to fit its container.
Common Values:
Fill: This is the default value. The content will stretch to fill the container, possibly distorting the image.
Contain: The content will be resized to fit within the container while maintaining its aspect ratio.
Cover: The content will cover the entire container while maintaining its aspect ratio. Some parts might be clipped to fit.
None: The content will not be resized. It will maintain its original size.
Scale-down: The content will be sized as either none or contain, whichever is smaller.
.example {
width: 300px;
height: 200px;
object-fit: cover;
}
Usage Example:
In this example, the image will cover the entire container, maintaining its aspect ratio. Parts of the image may be clipped to fit the dimensions.
HTML Code:
