CSS image as large as possible within square with caption no gap - css

Question

I'm 99% sure about this but thought i'd ask to see if anyone knew of any clever solutions.
Basically I wish to place an image in a 1/1 aspect containing element, and then for that image to be as as as it possibly can be, eg, landscape images always touch the left and right sides and portrait ones touch the top and bottom.
I then want a line of caption text underneath the image.
My question is, is there any way to get that size of image but without (for landscape images) the large gap between the photo and the caption?
My example image below shows the problem (please note the image is not full left to right edge here like I want).
Anyone know of any clever options to achieve this?
<figure class="photo-1 landscape">
<div class="image-wrapper gallery">
<a href="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" data-pswp-width="4032" data-pswp-height="3024" target="_blank">
<img src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_m.jpg">
</a>
</div>
<figcaption>Hersheypark</figcaption>
</figure>
figure {
display: flex;
flex-direction: column;
gap: 0.5rem;
.image-wrapper {
aspect-ratio: 1/1;
}
a {
display: block;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
&.landscape {
a {
min-width: 100%;
}
img {
width: 100%;
}
}
&.portrait {
a {
min-height: 100%;
}
img {
height: 100%;
}
}
figcaption {
text-align: center;
color: hsl(var(--color-secondary));
font-size: var(--fs--1);
}
}

Answer 1

This is what I got so far.
body {
background-color: #F8F9F9;
}
.container {
display: flex;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 0;
flex-grow: 1;
gap: 10px;
}
.image {
display: flex;
align-items: center;
background-color: #ffffff;
overflow: hidden;
}
.image.hor {
flex-direction: row;
}
.image.ver {
flex-direction: column;
aspect-ratio: 1/1;
}
.image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
.caption {
padding: 5px 10px;
font-size: 14px;
text-align: center;
background-color: #ffffff;
}
<div class="container">
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/100x50/000/fff" />
</div>
<div class="caption">
Landscape image (small)
</div>
</div>
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/1000x500/000/fff" />
</div>
<div class="caption">
Landscape image (large)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/50x100/000/fff" />
</div>
<div class="caption">
Portrait image (small)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/500x1000/000/fff" />
</div>
<div class="caption">
Portrait image (large)
</div>
</div>
</div>