Question

我目前正在开发一个响应式carousel jquery插件。旋转木马在桌面设备上显示3个图像，在平板电脑上显示2个图像，在移动设备上显示1个LI项目向左浮动以创建内容条带，并且轮播容器具有溢出：隐藏以隐藏当前未显示的条带内的元素。

在移动设备上（最大宽度：767px），只显示一个LI，我希望LI中的图像随着浏览器大小的减小而缩放。这当前没有用，我相信这可能是因为UL的位置是：绝对的。我已经尝试将图像移出旋转木马，然后按预期进行缩放，因此我假设应用于旋转木马的一些CSS正在影响图像的CSS。

任何帮助都会很棒。

轮播由以下HTML组成：

<div class="container carousel-container">
    <ul class="carousel row">
        <li class="col-md-4 col-sm-6 item">
            <a href="#"><img src="http://lorempixel.com/768/384/" class="img-responsive"></a>
        </li>
        <li class="col-md-4 col-sm-6 item">
            <a href="#"><img src="http://lorempixel.com/768/384/" class="img-responsive"></a>
        </li>
        <li class="col-md-4 col-sm-6 item">
            <a href="#"><img src="http://lorempixel.com/768/384/" class="img-responsive"></a>
        </li>
    </ul>
</div>

和以下CSS：

.carousel-container{
   overflow:hidden;
   position:relative;
}

.carousel-container .carousel {
    padding: 0;
    position: absolute;
    left: 0px;
}

.carousel-container .carousel .item {
    position:relative;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 1

以下是http://jsfiddle.net/LGJ5w/示例，如果您指定父级的宽度，则

max-width: 100%;

工作正常，否则失败。尝试拉伸输出iframe。

具有最大宽度的图像：100％不在具有位置的元素内缩放：绝对

1 个答案: