当我的图像缩小时，我的响应式滑块中的图像周围有多余的空间答案

【问题标题】：I have unwanted space around the images in my responsive slider when my image shrinks当我的图像缩小时，我的响应式滑块中的图像周围有多余的空间
【发布时间】：2017-10-25 16:08:54
【问题描述】：

I have unwanted space around the images in my responsive slider when my image shrinks.

我正在使用 Bootstrap 重新设计我设计的网站。我的问题是我希望页面顶部滑块内的图像调整大小。我使用了 img-responsive，它可以调整图像的大小。但是，这会导致图像周围的 div 在图像周围添加不需要的空间。我需要图像与带有灰色边框的容器大小相同。随着滑块中的图像变小，容器应该随着图像一起缩小，而不是在其周围添加额外的空间。

.img-responsive .thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  max-width: 100%;
  height: auto;
}


/* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */


/* Carousel base class */

.carousel {
  height: 425px;
  margin: 110px 0 20px 0;
}


/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  z-index: 10;
}


/* Declare heights because of positioning of img element */

.carousel .item {
  height: 500px;
  background-color: #777;
}

.carousel-inner>.item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

<div class="container">
  <div class="row">
    <div id="first-slider">
      <div id="carousel-example-generic" class="carousel slide carousel-fade">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <!-- Item 1 -->
          <div class="item active slide1">
            <div class="row">
              <div class="container">
                <img class="responsive" src="images/cotton-field.jpg" alt="Cotton Field">
                <!-- Slide One Image courtesy https://www.bsr.org/our-insights/blog-view/three-steps-tackle-raw-materials-inside-out-supply-chain-collaboration -->
              </div>
            </div>
          </div>
          <!-- Item 2 -->
          <div class="item slide2">
            <div class="row">
              <div class="container">
                <img class="responsive" src="images/bales.jpg" alt="Cotton Bales">
                <!-- Slide Two Image courtesy http://www.aiighk.com/our-business.php -->
              </div>
            </div>
          </div>
          <!-- Item 3 -->
          <div class="item slide3">
            <div class="row">
              <div class="container">
                <img class="responsive" src="images/pickers.jpg" alt="Cotton Picker">
                <!-- Slide Three Image courtesy http://aiighk.com/growers-services.php -->
              </div>
            </div>
          </div>
          <!-- Item 4 -->
          <div class="item slide4">
            <div class="row">
              <div class="container">
                <img class="responsive" src="images/warehouse.jpg" alt="Cotton Warehouse">
                <!-- Slide Four Image courtesy of https://nca-la.com/ -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，某些（或大多数）浏览器会在 body 元素上设置边距。添加以下 CSS 以删除这些边距：

html, body {
    margin:0;
    padding:0;
}

【讨论】：

【解决方案2】：

而不是 max-width:100%; , 试试 width:auto;

【讨论】：