Images of various sizes and img-responsive - how to set a responsive div?

Question

I have a site which is listing events from a database using an array of JSON objects. Each event has a bunch of images and some of them are not the same size as the others. This makes it so the events don't line up nicely in a 3 event per row matrix where only the primary image is visible but they are different sizes. I tried making a max height div and wrapping it around the image so that it puts white space so each event box maintains the same size as the others but that breaks my whole page when I zoom out past a certain point in the browser because all the relative divs below it don't move as the image gets too large and covers them. How do I deal with the situation of responsive images of different sizes but wanting to maintain them all having a container div of the same relative height that scales with zooming in and zooming out (without stretching the images horizontally, ideally)?

<div style="max-height:265px; min-height: 265px;">
    <img class="eventImage img-responsive" src="{{event.image}}" alt="{{event.name}}"/>
</div

Answer 1

Not sure if this will help, but could be somethng that you could look into and it might help! https://www.w3schools.com/howto/howto_js_lightbox.asp There is different styling taking place so may be one you are looking for. Hope this helps