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
