Image fit as per the boxes

HTML-CSS
1

Two images in boxes. One image is smaller than the box, the other is larger and breaking out of the box. how can I make the image perfectly fit in both boxes with respect to image?

2

Hi there,
you can style your div and give it a specific height and width , something like this :

div{
width:100px;
height:100px;
}

And Your image, give it a style like this :

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

You can also just give this style to your image and not even adjust the div’s width and height. It will work in both cases.
If you’re still having a problem, then please share your code so we can understand it more clearly.
Hope this helps.

1 Like
3

thanks.
This worked.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.