Question

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

DIAG1 DIAG2 DIAG3 SSTI.cat
1 00000 3829- 9985-        1
2 4659- 00000 00000        0
3 0356- 00000 00000        1
4 5664- 4659- 00000        0
5 771-- 7854- 00000        1
6 7715- 00000 00000        1
7 78791 566-- 00000        0

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>

Answer 1

您可以使用<img>代码并设置class="img-responsive"

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

Answer 2

你可以用这个

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

css

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

如何使bootstrap corousal响应

2 个答案: