如何使引导轮播响应式答案

【问题标题】：How to make bootstrap corousal responsive如何使引导轮播响应式
【发布时间】：2016-08-13 19:35:50
【问题描述】：

我正在制作全宽和全高的引导程序，高度响应但宽度不响应（即）当我调整窗口大小时，图像根据视口的宽度开始裁剪，当它到达移动屏幕时调整左侧部分的 corousal 作物，下面是 Bootstrap 和 css 代码，任何人都可以帮助锄头使图像宽度响应，谢谢

       <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>

            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/corousal2.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/corousal1jpg.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/corousal4.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

        <div class="drbatras-logo">
            <img src="images/logo.png" alt="logo"/>
        </div>    
    </header>

CSS

 html,
    body {
        height: 100%;
    }

    .carousel,
    .item,
    .active {
        height: 100%;
        position: relative;
    }

    .carousel-inner {
        height: 100%;
    }
    /* Background images are set within the HTML using inline CSS, not here */

     .drbatras-logo{
        position: absolute;
        top:60px;
        right: 170px;
    }

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

你可以使用<img>标签并设置class="img-responsive"

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">

【讨论】：

【解决方案2】：

你可以用这个

<div class="fill" id="fill"> </div>

css

#fill{
   background:url('images/corousal1.jpg') no-repeat center center;
   background-size:100% auto;
}

【讨论】：