My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm currently facing an issue where the images don't maintain equal height and fail to fill up the entire block. Here's a visual representation of my current setup:
https://i.sstatic.net/ZBBqs.jpg
I did some research on Stack Overflow regarding similar queries, but the solutions offered didn't seem to work for me. Despite setting the image element inside the container to 100% height, why are the images varying in heights initially? How can I resolve this issue?
You can view the complete HTML/CSS code on JSFiddle.
HTML:
<div class="flexbox">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue"
src="images/pyramid_texts.png" alt="Тексты пирамид">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue"
src="images/coffin_texts.jpg" alt="Тексты саркофагов">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue"
src="images/book_of_the_dead.png" alt="Книга мертвых">
</div>
</div>
CSS:
a
{
color: black;
text-decoration: none;
}
a:hover
{
color: red;
}
div.flexbox
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.item
{
height: 20%;
width: 20%;
}
h2
{
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400px;
style: block;
text-align: center;
}
img
{
height: 20%;
outline: 2px solid red;
width: 20%;
}
img.catalogue
{
height: 100%;
object-fit: contain;
width: 100%;
}
UPDATE: Even after trying out different CSS styles like background-size: cover, I still haven't been able to fix the issue. Could it be related to the structure of my HTML? Currently, I have a parent flexbox containing "item" blocks with a header displaying the book title and an <img>. Should I consider restructuring by removing the header from the item block?