は、私は私のイメージは

Question

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

を縮小したときに、私は私が設計されたウェブサイトの再設計にブートストラップ使用しています私の応答スライダーで画像の周りに不要なスペースを持っています。私の問題は、ページの上部にあるスライダー内の画像のサイズを変更したいということです。私は画像をサイズ変更する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"> 
 
\t <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"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <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>

Answer 1

一部（またはほとんど）のブラウザでは、デフォルトではbody要素のマージンを設定します。これらの余白を削除するには、次のCSSを追加します。

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

Answer 2

max-width：100％; 、try幅：自動;