Image is being cropped when the "max-width" CSS element is used

Asked

Viewed 137 times

1

At the bottom of this Wordpress site there are various logo images.

These images are entered by the site administrator himself within a table Pods, so I have no individual control for each image, I just need to apply a pattern to all images.

The original image dimensions are very different, so I need to restrict their sizes using max-width and max-height, which I put in the class wp-image-490:

enter image description here

But in doing so, if I reduce the screen size (to test responsiveness), the first image is being cropped:

enter image description here

And at the same time, I tried to fix it by inserting width: 100% in this same class, but in doing so, the second image is distorted:

inserir a descrição da imagem aqui

Could someone help?

css3 responsive resizing
  • 1

    Put in the image tag Object-fit: contain and Object-position: 50% 50%; if you solve tell me that put as response :)

  • 1

    Dude, you’re really awesome huh! Just inserting "Object-fit: contain" along with the current "width: 100%" already solved the problem. You can put that as an answer. Thank you!

  • It’s answered, it was worth the force :)

1 answer

1


So, these problems you can bypass by limiting the image within the rendering container itself using object-fit: contain. What I mean is that the image will render so that it fits proportionately within the width and height that you determined.

This documentation will help you: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

And this image will help you understand better

inserir a descrição da imagem aqui

Browser other questions tagged css3 responsive resizing

You are not signed in. Login or sign up in order to post.