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

当我将图像的高度设置为50%时，其容器的高度保持不变，而不是自动调整

HTML:

在这些代码之后，<强> IMG已将其高度更改为50%，但<强> IMG显示高度保持相同，空白内容已填入一半。

---

也许这个问题模棱两可，但欢迎任何帮助。谢谢

我真的不明白您对代码的期望是什么，但是根据img，

img

标签的高度和宽度都应该直接在标签中设置。假设你想要一个50x50的图像，你会这样做：

---

希望它有用

我不太明白您对代码的期望是什么，但是根据img，img标签的高度和宽度都应该直接在标签中设置。假设你想要一个50x50的图像，你会这样做：

---

希望它有用

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

---

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

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

---

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

你试过<代码> .img项目A {显示：块；}？你试过<代码> .img项目A {显示：块；}？我如何删除空白内容，i、 e.使用百分比使容器的高度等于img的高度？可能我的问题不清楚。我的意思是如何使img容器的高度与img的高度相适应。当我使用百分比设置容器的高度时，它保持不变。你的问题很清楚。我不相信它可以用CSS来做。我怎样才能去除空白内容，即使用百分比来使容器的高度等于IMG的高度？也许我的问题不清楚。我的意思是如何使IMG容器的高度与IMG的高度相适应。你的问题很清楚。我不相信CSS可以做到这一点。谢谢你的回答。也许你误解了我的问题。我不知道如何使用百分比使容器的高度等于img的高度。你不必这样做，如果图像在

img

标记中的高度正确，在CSS中设置任何高度通常都是不好的做法，包含图像的div将在CST中进行调整而不设置任何高度谢谢你的回答。也许你误解了我的问题。我不知道如何使用百分比使容器的高度等于img的高度。你不必这样做，通常在css中设置任何高度都是不好的做法，如果图像在

img

标记中具有正确的高度，则包含图像的div将自适应，而无需在css中设置任何高度

<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>

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