html - 如何在 Bootstrap 轮播中调整 img 的大小？

Question

我正在尝试构建一个集成在 WordPress 中的网站。我的问题是旋转木马的图像没有在旋转木马 div 中调整大小。我该如何解决？

HTML 来源

  <div class="item">
    <img src="http://i.hizliresim.com/z34va9.jpg" alt="Chania" width="460" height="345">
  </div>

<!-- Left and right controls -->
<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>

CSS 源代码

.carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
  width: 100%;
  margin: 533px;

Answer 1

object: fit; 添加到 img 对我有用。因为我希望我的旋转木马填满整个页面，所以我还使用了 height: 100vh; width: auto;，但在你的情况下它应该是 width: 100%;高度:自动；。

附言我知道一年前有人问过这个问题，但其他人可能会寻找解决方案。