Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

而不是max-width：100％; ，尝试宽度：自动;

当我的图像缩小时，我的响应滑块中的图像周围有不需要的空间

2 个答案: