Adjust an Image File on a Specific Div or Size Using CSS (auto resize image)

#html #css #image #imageresize

First of all you need a <div> over the <img> tag. Then add given CSS with the div. If you want any specific size or shape of the image then add those shape to this div. example: Circle, Hexagonal etc.

Outer <div>:

height: 500px;
width: 500px;

<img> Tag:

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

object-fit:
Here object-fit property has following values: fill, contain, cover, scale-down, none. We will use object-fit: cover because cover value keeps the image in its aspect ratio and fills the given dimension. The image will be clipped to fit.

object-position:
center center : For scale the image from the center of the picture.

right bottom:
<img> element will align to bottom-right edge of its parent container with object.

100% 80%:
You also can add this percentage as a value to positioning the image.

height:
100% & width: 100%:
This property will cover the image into the shape or div.