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

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>

不过，我的轮播图像比框架大。我正在考虑让它在桌面和移动设备上看起来大致相同。 我有这个用于 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/