Question

自从昨晚以来我一直在尝试这个，但是我尝试的代码似乎越来越差。我原本想尝试构建一个响应式图像滑块，但由于某种原因决定使用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并使用边框和填充图像在后面有白色背景。

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

1 个答案: