Aspect ratio Vs Cropping: How to avoid pixelated/stretched images yet have the same dimension

I am re-opening this thread.

Can we create something using overflow: hidden property or something like that in which we can create a fix image size box, but images should not pixelate or stretch but go down as if the extra image is getting hidden inside the div.

Sure, that could work.

AFAIK, images would be position top 0, left 0 and anything too far to the right or bottom would essentially be “cropped”.

What happened when you tried it?

1 Like

Seems much like the same question because that’s effectively what object fit and background size cover do.

You could hide the overflow on the image but you would need to make sure the image height and width was greater than the dimensions of the fixed image size box (min width and max width perhaps with auto dimensions). Again this is what object fit does.

If you have a fixed sized image holder how are you going to make it responsive?

Put up a codepen with what you are attempting and we can have a play around with it later. I’m out today until later this evening now.

1 Like