Html 如何完全适合旋转木马内的图像（Bootstrap）

How to fully fit an image inside carousel(Bootstrap)

提问by Akash279

I have made a fully functional carousel but the problem is that on the right side of carousel white block is appearing. I want to ged rid of that. Please help.

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

<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>

采纳答案by Minal Chauhan

Set Image width:100%

设置图像 width:100%

.item img {
  width:100%
}

Here is Demo: https://jsfiddle.net/u9kkdLzb/

这是演示：https: //jsfiddle.net/u9kkdLzb/

回答by Udhay Titus

in your css set image width:100%

在你的 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>

回答by Rory

<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.

将 .container-fluid 用于全宽容器，跨越视口的整个宽度。请注意，在添加到您的网站之前，图像仍然需要调整大小，这是一种很好的做法。

回答by Aaron Barragan

Theres also an easy way to implement this right in the carousel html structure. Every time you insert an img as an item, while still being inside the tag, add style="width: 100%". so it would look something like this.

还有一种简单的方法可以在轮播 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>

回答by d0rf47

I just encountered this problem with a project. There are ways to fiddle with the image size via css but you will most likely end up with undesirable results such as squished or stretched looking images.

我刚刚在一个项目中遇到了这个问题。有很多方法可以通过 css 调整图像大小，但很可能最终会得到不想要的结果，例如看起来被压扁或拉伸的图像。

1 method is to use a div with a specified size, use css to set the image as a background image for the div and set background-size to fit, contain or cover.

第一种方法是使用指定大小的div，使用css将图片设置为div的背景图片，设置background-size为fit、contain或cover。

2 A better approach is to use an image manipulation program like photoshop, i personally use an online application called https://www.photopea.com. Is is basically a free online version of photoshop. Just edit the image size and DPI and it will help retain a more correct aspect-ratio.

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