CSS object-fit

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

object-fit

CSS Object-Fit is a CSS property that allows developers to control how an object or image is resized to fit its container. It is a powerful tool for creating responsive designs that look great on any device.

Object-fit is a relatively new addition to the CSS specification, first appearing in the CSS3 specification. It is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge

The CSS object-fit property is used to define how the content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box.

This property can take the following values:

 object-fit: fill | contain | cover | none | scale-down;

• fill: The element is resized to fill the container, without preserving its original aspect ratio.
• contain: The element is resized to fit the container, preserving its original aspect ratio.
• cover: The element is resized to cover the container, preserving its original aspect ratio.
• none: The element is not resized

The fill value is useful for creating responsive designs that look great on any device. For example, if you have an image that needs to be resized to fit a container, you can use the fill value to make sure the image always fills the container, regardless of the size of the container.

The contain value is useful for creating responsive designs that maintain the original aspect ratio of the element. This is useful for ensuring that an image looks the same on all devices.

The cover value is useful for creating responsive designs that always fill the container, even if the aspect ratio of the element is different from the aspect ratio of the container. This is useful for creating designs that look great on any device.

Finally, the none value is useful for creating designs that don’t resize the element at all. This is useful for creating designs that look the same on all devices.

img {
   object-fit: cover;  
}