Posts

Showing posts with the label cover

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