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 的高度保持不变，且空白内容已填半。< / p>

也许这个问题含糊不清，但欢迎任何帮助。谢谢！

Answer 1

如果img height是其父级的50％，那么它的容器必须是img的两倍。因此，容器的下半部分必须是空白内容。

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

Answer 2

我真的不明白您对代码的期望是什么，但根据img documentation，img标记的高度和宽度都应直接设置在代码中。所以想象你想要一个50x50的图像，你会做这样的事情：

<img alt="" height="50" width="50" />

希望它有用

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

2 个答案: