javascript - 如何在 Bootstrap Carousel 中制作流畅的图像

Question

如何使我的图像在 Bootstrap 中“流畅”并更改为居中对齐？

意味着在更改浏览器分辨率后图像不适合轮播边框并且不对齐。

<div class="carousel-inner" role="listbox" >
<div class="item active">
  <img src="img/coffe.jpeg" alt="Coffee" width="460" height="365" a>
</div>

<div class="item">
  <img src="img/sandwich.jpeg" alt="Sandwich">
</div>

<div class="item">
  <img src="img/wine.jpeg" alt="Wine">
</div>

<div class="item">
  <img src="img/sandwich.jpeg" alt="Sandwich">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
</div>

Answer 1

你可以在图片中添加class='img-responsive'，这里是example

使用下面的css对齐图片居中，通过将item直接子图片的左右边距设置为auto，图片会居中对齐。

  .carousel-inner > .item > img {
      margin: 0 auto;
   }