Question

我制作了一个功能齐全的旋转木马，但问题是在旋转木马的右侧出现了白色块。我想摆脱它。请帮忙。

Example

<div class="carousel-inner">
  <div class="item active">
    <img src="Jellyfish.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Koala.jpg" alt="image">
    <div class="carousel-caption">
      <h2 style="color:orange">This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Penguins.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
    <a href="#caro" class="left carousel-control" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#caro" class="right carousel-control" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Answer 1

设置图片width:100%

.item img {
  width:100%
}

以下是演示：https://jsfiddle.net/u9kkdLzb/

Answer 2

在你的css设置图片宽度：100％

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
        display: block;
        height: auto;
        max-width: 100%;
        line-height: 1;
        margin:auto;
        width: 100%; // Add this
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="carousel-inner">
  <div class="item active">
    <img src="Jellyfish.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Koala.jpg" alt="image">
    <div class="carousel-caption">
      <h2 style="color:orange">This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
  <div class="item">
    <img src="Penguins.jpg" alt="image">
    <div class="carousel-caption">
      <h2>This is the heading</h2>
      <p>This is paragraph</p>
    </div>
  </div>
    <a href="#caro" class="left carousel-control" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#caro" class="right carousel-control" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Answer 3

<img src="~/images/IMAGE.jpg" alt="Important IMAGE" class="container-fluid" />

Use .container-fluid for a full width container, spanning the entire width of your viewport. Please note images still need to be sized well before adding to your site, its good practice.

Answer 4

还有一种简便的方法可以在轮播html结构中实现此权利。每次将img作为项插入时，仍在标记内，请添加style =“ width：100％”。所以看起来像这样。

<div class="item active">
      <img src="img1.jpg" style="width: 100%">
    </div>

    <div class="item">
      <img src="img2.jpg" style="width: 100%">
    </div>

    <div class="item">
      <img src="img3.jpg"  style="width: 100%">
    </div>

Answer 5

我刚刚在一个项目中遇到了这个问题。有多种方法可以通过css来调整图像大小，但最终很可能会导致不良结果，例如压缩图像或拉伸图像。

1方法是使用具有指定大小的div，使用css将图像设置为div的背景图像，并将background-size设置为适合，包含或覆盖。

2更好的方法是使用诸如photoshop之类的图像处理程序，我个人使用名为https://www.photopea.com的在线应用程序。基本上是photoshop的免费在线版本。只需编辑图像大小和DPI，它将有助于保持更正确的宽高比。

如何在旋转木马内完全贴合图像（Bootstrap）

5 个答案: