Question

我最近在编写html和css时偶然发现了一个问题。我在div中有这个img元素，我希望div调整到我img的大小。它是一个响应式设计，所以每当我的img变小，我希望我的div用它调整大小。通常它会自动执行此操作，但因为我使用＆＃34; position：absolute＆＃34;在我的img标签中，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/

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

1 个答案: