html - 为什么当容器的图片内容高度发生变化时，容器的高度不适应？

Question

当我将图片高度设置为50%时，它的容器高度保持不变，而不是自动适应。

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%;
}

在这些代码之后，img 的高度已经变成了 50%，但是 img-show 的高度保持不变，空白内容已经填充了一半。

也许问题不明确，但欢迎任何帮助。谢谢!

Answer 1

如果您的 img 高度是其父级的 50%，则其容器必须是 img 的两倍高。因此容器的下半部分必须是空白内容。

本质上，容器是根据其内容高度来定义的。因此，如果图像高度是根据其容器高度定义的，这将是一个圆形定义。为了解决这个问题，浏览器使用图像的宽度和图像固有的宽高比来确定图像的 100% 高度，然后将图像高度调整为该高度的指定百分比。不管指定的百分比是多少，容器高度必然是图片的100%高度。