如何根据容器高度按比例缩放多个图像？

Question

I'm trying to figure out how to do this. I have 3 images, all in different but specific sizes that will scroll horizontally within a container (container will have overflow: hidden . That container should take up as much space as possible between two other divs and I'm doing that with flex-grow: 1 , and the container looks good.

However, those images, how can I make sure they resize and keep proportions based on that container height, based on viewport height?

I know maximum size the images can be in both width and height.

Please have a look at my example here: https://fvsu2.csb.app/

As you can see, the images wont resize at all if the container they are within is getting a lower height than the image itself...? It just stops, and the bottom part goes below viewport.

Is this even possible?

Answer 1

U want your cardImage to be height:auto width:100%, what u have now is in reverse.

Answer 2

you could try this:

1. do not set height for images, it will distort the image
2. set container height to auto
3. set images width to 100%

example:

.container{height: auto}
.container .images{width: 100%}

in case of overflow, set this

.container{height: auto; overflow: hidden}

but the images will not overflow out of the container if you set the images width to width: 100% and make sure the width of the container is in px or use bootstrap to set the width of the container eg

<div class="col-lg-12 col-md-12 col-sm-12"></div>

for the container, with this the images will never overflow the container