3x3ブロックの画像をCSSで修正する方法

Question

3x3ブロックの画像があります。

イメージの幅を400ピクセル、高さを300ピクセルにします。

また、画像を画面の端から端まで伸ばし、画像間にスペースがないようにします。

This is what it looks like at the moment

これが私の現在のCSSとHTMLである：

.clear { 
 
    clear: both; 
 
} 
 

 
#grid { 
 
    width: 100%; 
 
} 
 

 
.grid-element { 
 
    width: 33.3333%; 
 
    height: 200px; 
 
    float: left; 
 
}

<div id="grid"> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
    <div class="grid-element"> 
 
    <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 

 
</div> 
 

 
<div class="clear">Example taken from <a href="https://gist.github.com/grandoch/1400971">grandoch</a>'s gist</div>

Answer 1

E.は、ブートストラップで使用するための答えを更新しました。

ブートストラップでは、すべてのcol-*-*要素の左右の埋め込みが追加されるため、そのパディングを削除するだけで済みます。

ビューポートの幅をフルにするには、流体容器、つまりcontainer-fluidクラスを使用する必要があります。

#grid .grid-element { 
 
    height: 200px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container-fluid"> 
 
    <div id="grid" class="row"> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    <div class="col-xs-4 grid-element"> 
 
     <img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" /> 
 
    </div> 
 
    </div> 
 
</div>