html - 将一个 html 元素的大小调整为另一个元素

Question

我最近在编码 html 和 css 时偶然发现了一个问题。我在一个 div 中有这个 img 元素，我希望 div 调整到我的 img 的大小。这是一个响应式设计，所以每当我的 img 变小时，我希望我的 div 随之调整大小。通常它会自动执行此操作，但由于我在我的 img 标签中使用了“position: absolute”，div 高度仅为 0。

Html:(注意:有 4 张图片，因为我正在使用 css3 创建幻灯片，这也是我需要在我的 img 标签上使用绝对位置的原因)

<div id="cf4a" class="shadow">
    <img src="Afbeeldingen/Home/img1.jpg">
    <img src="Afbeeldingen/Home/img2.jpg">
    <img src="Afbeeldingen/Home/img3.jpg">
    <img src="Afbeeldingen/Home/img4.jpg">
</div>

CSS:

#cf4a {
    text-align: center;
    padding-left: 2.5%;
    width:95%;
    position: absolute;
}
#cf4a img {
    max-width: 1160px;
    width: 90%;
    position: absolute;
    left: 1.25%;
}

我该如何去解决这个问题？提前致谢。

Answer 1

这是一个很好的教程，可以帮助您了解您正在尝试做的事情，

基本上，您通过使用相对位置来欺骗 css，但切换查看的部分，使用溢出隐藏属性，检查一下它非常酷!

http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/