ブートストラップを使用して高さが固定された画像を含むdivを作成します

Question

ブートストラップの使用を開始しました。 私はdivの中に、固定された高さ、例えば30％の画像を持つdivを作成したいと思っていました。 高さが固定された画像を含むdivを作成しましたが、なぜその幅がすべてのページでないのかわかりません。 そして、添付されていないイメージと一緒にdivの下にnavbarを作成すると、リンクは切断されたままです。 私の考えは、このようなものを作成することでした：http://www.templatemonster.com/demo/51241.html私は一瞬のために書かれたもの

： HTMLコード：

<div class="container-fluid container-image"> 
     <div class="row my-row" style="height:100px; width: 100%"> 
     <div class="col-md-12"> 
      <div class="content"></div> 
      <div class="background" ></div> 
      </div> 
     </div> 
    </div> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 

     </div> 
    </nav> 

CSSコードは：

.my-row{ 
     position: relative; 
     height: 100%; 
     overflow: hidden; 
} 
.content{ 
     position: relative; 
     width: 100%; 
     text-align: center; 
     padding: 10px; 
} 
.background { 
     position: absolute; 
     padding-top: 200%; 
     left: 0; 
     top: 0; 
     width: 100%; 
     background-image: url(image.jpg); 
     background-repeat: no-repeat; 
    } 
body, html, .container-fluid { 
    height: 100%; 
    width: 100%; 
} 

Answer 1

問題がありますことすべてだが、背景画像自体はのサイズにしようとした。
簡単な解決策があります。.background CSSコードでは、のバックグラウンドサイズを100％に設定するだけです。これにより、画像が常にcol-md-Xクラスにスケールされます。

background-size: 100%;