When I set the height of an image to 50%, its container's height remains the same instead of automatically adjusting.
HTML:
<section class="img-show">
<div class="img-container">
<ul>
<li class="img-item">
<a href="">
<img src="./AnimatedFrameSlideshow_Featured.jpg" alt="">
</a>
</li>
<li class="img-item">
<a href="">
<img src="./DecorativeLetterEffects_featured.jpg" alt="">
</a>
</li>
</ul>
</div>
</section>
CSS:
.img-show {
width: 100%;
overflow: hidden;
}
.img-container {
width: 400%;
}
.img-show ul {
display: flex;
padding: 0;
}
.img-item {
list-style: none;
width: 100%;
}
.img-item img {
min-width: 100%;
height: 50%;
}
Even after applying these codes, the img element changes its height to 50%, but the height of img-show remains constant and is filled with blank space. Any assistance or clarification on this issue would be highly appreciated. Thank you!