如何完全适合轮播中的图像（引导程序）答案

【问题标题】：How to fully fit an image inside carousel(Bootstrap)如何完全适合轮播中的图像（引导程序）
【发布时间】：2017-03-02 08:08:12
【问题描述】：

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

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

【问题讨论】：

试试这个：- .item img{width:100%}
使用大小适合轮播的图片？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

我是 Bootstrap 的初学者，你可以编辑代码，然后发布完整的编辑后的有效代码
.carousel-inner>.item>img, .carousel-inner>.item>a>img
你能解释一下这行吗
你能解释一下这行吗.carousel-inner>.item>img, .carousel-inner>.item>a>img
.carousel-inner 是一个类， .item 也是单独的类...图像在 .item 类和 .carousel-inner 类中，所以我们像这样应用图像宽度.. 就像继承

【解决方案2】：

设置图片width:100%

.item img {
  width:100%
}

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

【讨论】：

你能解释一下这行吗.item img { width:100% }
item div 轮播中每张幻灯片的内容滑块文本和图像。这样图像就会出现在 Item div 中.. 对于那个 css 来说就是这样..

【解决方案3】：

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

将.container-fluid 用于全宽容器，跨越视口的整个宽度。请注意，图片在添加到您的网站之前仍需要调整好尺寸，good practice。

【讨论】：

请添加一些描述和解释来回答

【解决方案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>

【讨论】：

【解决方案5】：

我刚刚在一个项目中遇到了这个问题。有一些方法可以通过 css 调整图像大小，但您很可能最终会得到不希望的结果，例如压缩或拉伸的图像。

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

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

【讨论】：