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%; height: auto;。

P.S。我知道它曾经在一年前问过，但也许其他人会寻找解决方案。

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

1 个答案: