Question

我在旋转木马中的图像没有全宽。我想减少我决定在这里上传的旋转木马的高度。下面是我的旋转木马代码。请任何帮助的尝试将不胜感激。我已经尝试过使用图像的高度。

<div class="row">
    <div class="col-sm-8">
    <div class='carousel slide' id="myCarousel">

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


    <div class="carousel-inner">
        <div class="item active" id="slide1">
            <img src = "http://i.imgur.com/SQ691ZO.jpg"/ >
            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide2">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide3">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>
        </div>

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


</div>
</div>

Answer 1

将此行添加到您的css

position: absolute;
background-size: cover;

这可以解决您的问题。

更确切地说，

.carousel{
  background-size: cover;
  background-repeat: no-repeat;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  min-height: 500px !important;
  height: 500px !important; /* Height as you want.*/
}

无需指定宽度。

<强>更新

这是您需要放置的确切代码。轮播图像应在background attr CSS而不是img标记

中指定

<div class="row">
    <div class="col-sm-8">
    <div class='carousel slide' id="myCarousel">

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


    <div class="carousel-inner">
        <div class="item active" id="slide1" style="background-image: url(http://i.imgur.com/SQ691ZO.jpg)"> 

<!-- Specify the image as background and add the CSS I gave you.-->
            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide2">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide3">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>
        </div>

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


</div>
</div>

Answer 2

我尝试将宽度添加到img只是它确实有效，这是预期的行为吗？

.carousel-inner img {
  width: 100%;
  height: 200px !important;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-8">
    <div class='carousel slide' id="myCarousel">

      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="2" data-target="#myCarousel"></li>
      </ol>


      <div class="carousel-inner">
        <div class="item active" id="slide1">
          <img src="http://i.imgur.com/SQ691ZO.jpg" >
          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>

        <div class="item" id="slide2">
          <img src="http://i.imgur.com/zN4h51m.jpg" >

          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>

        <div class="item" id="slide3">
          <img src="http://i.imgur.com/3ruWvoG.jpg">

          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>
      </div>

      <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
      <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>


    </div>
  </div>

旋转木马图像即使是最小宽度也不是全宽：100％

2 个答案: