How to fix image in div without stretching in CSS if the image size is greater than or less than div

 

How to fix an image in div without stretching in CSS if the image size is greater than or less than div 

object-fit property is used for images or video for set in div without stretch it

.image{

height:100%;
width:100%;
object-fit:cover;

}

Here arrives the object-fit property.  It has one of the following rules:

  • fill - This is the default. The image is resized to fill the given size. If required, the image will be stretched to fit
  • contain - The image keeps its property ratio, but is resized to fit within the given dimension
  • cover - The image keeps its property ratio and fills the given dimension. The image will be clipped to fit
  • none - The image is'nt resized
  • scale-down - the image is scaled down to the minimum version of none or contain

Comments

Post a Comment