html - 如何让 div 容器垂直调整大小与图像相同？

Question

我从昨晚开始就一直在尝试这个，但是我尝试得越多，代码似乎越糟糕。我最初想尝试构建一个响应式图像 slider ，但出于某种原因决定使用 UL 来实现。它可能不需要，但我的问题是一样的。当我调整浏览器窗口的大小以使其变窄时，图像会垂直调整大小，但 div 容器不会。我尝试了百分比、像素、vh 值、最大高度等，但没有任何方法可以使容器根据内部图像的比例调整大小。容器名为 .slide 我也制作了一个 JSFiddle

.slider
{
    width : 100% ;
    height : 100% ;
    position : relative ;
    padding : 0 ;
    margin : 0 ;
    background : green

}

.slide
{
    background-color : #FAFAFA ;
    width : 30% ;
    margin : auto ;
    height : 50% ;
    min-height : 330px ;
    position : relative ;
    top : 30% ;
    right : 0 ;
    left : 0 ;
    bottom : 0
}

.slide ul
{
    list-style : none ;
}

.slide ul li
{
    position : absolute ;
    left : 18% ;
    right : 18% ;
    top : 16%   
}

ul li img.photos
{
    width : 100% 
}

Answer 1

这是因为在下面的代码中您设置了 min-height: 330px 不允许容器垂直调整大小。同时降低 height: 50%; 因为我看到你不需要 50% 的高度。

我还建议对图像使用 min-height 和 min-width。

.slide
{
    background-color : #FAFAFA ;
    width : 30% ;
    margin : auto ;
    height : 50% ;
    min-height : 330px ;
    position : relative ;
    top : 30% ;
    right : 0 ;
    left : 0 ;
    bottom : 0
}

Fiddle

第二种可能性是你摆脱额外的 div 并使用边框和填充让图像在后面有白色背景。