Web Template which manage images in a grid and has a zoom-in feature

[wisharya]

I am working on creating a web page of image gallery using a web template, which manages images of various size in a grid and has a zoom-in feature, like this

So far I am only able to create a webpage of having images in a square card, like this

but this gets whitespace while adding a picture that is not square, like this

I am very new to CSS, please help me if you can.

Web template I have created

(I know I could have used the for loop, but the number of image is gonna be less than 6-7, so I didn’t).

Also, currently It doesn’t have the option to zoom-in the image.

{% set gallery = frappe.get_all('Gallery', fields=['*'], filters={'enabled': 1}, order_by='-(date)') %}

<h2 class="section-title">{{ title }}</h2>
{% if subtitle %}
<p class="section-description">{{ subtitle }}</p>date 
{% endif %}
<div class="row mt-4">
    
{% for item in gallery %}
<div class="col-12">
        <h3>{{ item.event_name }}</h3>
        <h3>{{ item.date }}</h3>
        <div class="row">
            <div class="col-12 col-lg-4">
		<img class="card-img-top"  src="{{item.image_1 or 'https://api.adorable.io/avatars/200/'}}">
	    </div>
	    {% if item.image_2 %}
	    <div class="col-12 col-lg-4">
		<img class="card-img-top" src="{{item.image_2 or 'https://api.adorable.io/avatars/200/'}}" style= display:block;>
	    </div>
	    {% endif %}
	    {% if item.image_3 %}
	    <div class="col-12 col-lg-4">
		<img class="card-img-top"  src="{{item.image_3 or 'https://api.adorable.io/avatars/200/'}}">
	    </div>
	    {% endif %}
	    {% if item.image_4 %}
	    <div class="col-12 col-lg-4">
	    <img class="card-img-top" src="{{item.image_4 or 'https://api.adorable.io/avatars/200/'}}">
	    </div>
	    {% endif %}
	    <div class="col-12 col-lg-4">
	    {% if item.image_5 %}
		<img class="card-img-top" src="{{item.image_5 or 'https://api.adorable.io/avatars/200/'}}">
		{% endif %}
	    </div>
	    {% if item.image_6 %}
	    <div class="col-12 col-lg-4">
		<img class="card-img-top" src="{{item.image_6 or 'https://api.adorable.io/avatars/200/'}}">
	    </div>
	    {% endif %}
	    {% if item.image_7 %}
	    <div class="col-12 col-lg-4">
		<img class="card-img-top" src="{{item.image_7 or 'https://api.adorable.io/avatars/200/'}}">
	    </div>
	    {% endif %}
	    {% if item.image_8 %}
	    <div class="col-12 col-lg-4">
		<img card card-lg w-100 src="{{item.image_8 or 'https://api.adorable.io/avatars/200/'}}">
	     </div>
        <br><br>
        </div>
{% endfor %}
</div>