如何做到bootstrap的轮播图中的图片大小可以自适应宽度

Question

比如一般情况，我在一个页面插入一个图片，只要设置宽度为100%，当缩小屏幕尺寸的时候，图片的宽高会同时成比例的缩小。

而在bootstrap的轮播插件中，我缩小可视区后，比如达到平板的宽度后，此时，轮播图的高度会不变，但是宽度被截取了一部分。

请问如何做到轮播图中的图片成比例缩放

谢谢

Answer 1

宽度被截取了一部分？
如果我没有猜错的话
你应该没有做移动端的适配！
请仔细看 Bootstrap的栅格系统

Answer 2

可以设置min-height属性，

Answer 3

图片的响应式类是img-responsive，而且轮播的图片不管是尺寸还是大小都是精心做好的，不要让图片质量等参差不齐。

Answer 4

<div class="banner">
            <div class="banner-img" style="background-image: url(images/01.jpg);"></div>
    </div>

.banner-img {
            padding-top: 38.5%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

参考一下，写个demo，调整一下padding-top，你就会明白了