Seeking guidance on a grid photo gallery with mismatched sizes and aspect ratios of images.
I am trying to determine how to adjust the height of the <img> element to accommodate the varying heights of the <figcomment> (depending on the number of tags).
- If I set the <img> height to '100%', the <figcomment> overflows the <figure>.
- If I use 'height: auto;', landscape images leave excessive space above the <figcomment>.
Is there a way to properly size the <img> so it fills the <figure> without pushing the <figcomment> outside?
Placing the <figcomment> above the <img> and setting <figure>'s 'overflow: hidden' achieves the desired outcome, but preferably I would like the tags beneath the image?
<figure>
<a href="/photo/349">
<img src="/images/77.jpeg">
</a>
<figcaption>
<a href="/tag/dog">dog</a>
</figcaption>
</figure>
<figure>
<a href="/photo/251">
<img src="/images/104.jpeg">
</a>
<figcaption>
<a href="/tag/tink">tink, </a>
<a href="/tag/dog">dog, </a>
<a href="/tag/human">human</a>
</figcaption>
</figure>
<figure>
<a href="/photo/361">
<img src="/images/88.jpeg">
</a>
<figcaption>
<a href="/tag/adam"&t;gt;adam, </a>
<a href="/tag/dio"&t;gt;dio, </a>
<a href="/tag/dog"&t;gt;dog, </a&t;
<a href="/tag/human">&t;human, </a>
<a href=/tag/car">car</a>t;
</figcaption>&t;
</figure>&t;
section {
display: grid;
column-gap: var(--colGap);
row-gap: calc(var(--colGap) * 1.618);
grid-template-columns: repeat(auto-fill, var(--photoW));
justify-content: center;
}
figure {
width: var(--photoW);
height: calc(var(--photoW) * 1.618);
padding: 5px;
border: 2px solid var(--accent);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
figcaption {
padding: .3em;
margin-left: -7px;
width: var(--photoW);
color: var(--dark);
font-size: 18px;
text-align: center;
}