Slider images height on mobile


I am finishing this project:

On the homepage slider, on mobile, the clients the img to have the same height, and the width to vary if images have different proportions.

He says that how it is now the slider jumps and the info below moves and he don't wants that. I don't see any way to do that...

Hey Alex, which slider are you refering too?


The one on the home page, Notable grantees, after the grid our grants

I can only think of two solutions here:

  1. Setting a min min-height hard coded in CSS if you know the height or dynamically set based on the heightest image via JavaScript.
  2. Croping images to make sure they always have the same ratio

Happy coding,

Thank you, i am going to try the first solution, with js, i don't think it is possible to crop the images for the client as it is artworks

Finally the solution is not min-height, but max-height, taking the less high image + width: auto 🙂 tested in the inspector for the moment and it works!

Write a reply

Login or register to write a reply, it's free!