0

I have an application where users can upload pictures of themselfes and these are displayed to other users through an Image Slider. How can I make these pictures responsive, because sometimes they are looking great and sometimes they just look weird because of the styling. I want these pictures to take around 40% of the height on big devices and 60% of the height on smaller devices like mobile phones. The width should always be around 80%...

I have tried to use max-height and max-width, but then every image container have a different height and a different width which is not looking smooth in the Slider.

Mats2022
  • 1
  • You could try `min-width` and `min-height`. Another way I'd do it is to encapsulate the img in a div that you can set up to `height: 40vw` and `width: 80vw` , then use `object-fit: cover; object-position: 50% 50%; height: 100%; width: 100%;` for the img itself. That way any ratio image will look uniform. – Alexandra Batrak Nov 25 '22 at 22:56
  • Please provide enough code so others can better understand or reproduce the problem. – Community Nov 27 '22 at 15:03

0 Answers0