Question

所以我在这里有一个旋转木马：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="web-background.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>text</h1>
          <p>text</p>
          <p><a class="btn btn-lg btn-primary" href="pockets.html" role="button">Get me started!</a></p>
        </div>
      </div>
    </div>
  </div>

虽然，我对carosel的图像比框架大。我正在考虑让它在桌面和移动设备上看起来都一样。我有这个用于CSS：

.carousel {
  height: 500px;
  margin-bottom: 60px;
}
.carousel-caption {
  z-index: 10;
}
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: -70%;
  left: 0;
  min-width: 100%;
}

我可以看到我在CSS中尝试了top的百分比。除此之外，我试图调整top像素，看看是否有某种“甜蜜点”。

Answer 1

试试这个：

<强> HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide"    src="http://www.slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>text</h1>
<p>text</p>
<p><a class="btn btn-lg btn-primary" href="pockets.html" role="button">Get me started!</a></p>
</div>
</div>
</div>
</div>

CSS：

#myCarousel {
width: 100%;
}
.carousel img{
width: 100%;  
}

https://jsfiddle.net/toolbox3/d5oveknt/1/

如何使大于轮播的图像在所有屏幕上显示相同的方式？

1 个答案: