Как сохранить правильный размер изображения в разных разрешениях, в Bootstrap?

Question

Я работаю над сайтом, в котором мне нужно создать четыре столбца равной ширины. В верхней части столбцов мне нужно поместить изображение. Ниже мой код:

<div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-10"> 
     <div class="row" style="margin-bottom:30px;"> 
      <div class="col-xs-3"> 
       <div class="row" style="width:100%;height:auto;"> 
        <img src="images/small/one.jpg" /> 
       </div> 
       <div class="row" style="height:200px;"> 
        <div class="col-xs-12">First column title</div> 
       </div> 
      </div> 
      <div class="col-xs-3"> 
       <div class="row" style="width:100%;height:auto;"> 
        <img src="images/small/two.jpg" /> 
       </div> 
       <div class="row" style="height:200px;"> 
        <div class="col-xs-12">Second column title</div> 
       </div> 
      </div> 
      <div class="col-xs-3"> 
       <div class="row" style="width:100%;height:auto;"> 
        <img src="images/small/three.jpg" /> 
       </div> 
       <div class="row" style="height:200px;"> 
        <div class="col-xs-12">Third column title</div> 
       </div> 
      </div> 
      <div class="col-xs-3"> 
       <div class="row" style="width:100%;height:auto;"> 
        <img src="images/small/four.jpg" /> 
       </div> 
       <div class="row" style="height:200px;"> 
        <div class="col-xs-12">Fourth column title</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-1"></div> 
</div> 

Как я могу поместить изображение правильно выше столбца, ширины изображения, равной ширине столбца, без создания нескольких изображений размера?

Answer 1

Пожалуйста, найдите код, который работает. Я просто добавил класс «img-responsive», который является начальной загрузкой в ​​классе сборки для всех тегов изображений.

---

<div class="row"> 
 
    <div class="col-xs-1"></div> 
 
    <div class="col-xs-10"> 
 
     <div class="row" style="margin-bottom:30px;"> 
 
      <div class="col-xs-3"> 
 
       <div class="row" style="width:100%;height:auto;"> 
 
        <img src="images/small/one.jpg" class="img-responsive"/> 
 
       </div> 
 
       <div class="row" style="height:200px;"> 
 
        <div class="col-xs-12">First column title</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <div class="row" style="width:100%;height:auto;"> 
 
        <img src="images/small/two.jpg" class="img-responsive"/> 
 
       </div> 
 
       <div class="row" style="height:200px;"> 
 
        <div class="col-xs-12">Second column title</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <div class="row" style="width:100%;height:auto;"> 
 
        <img src="images/small/three.jpg" class="img-responsive"/> 
 
       </div> 
 
       <div class="row" style="height:200px;"> 
 
        <div class="col-xs-12">Third column title</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <div class="row" style="width:100%;height:auto;"> 
 
        <img src="images/small/four.jpg" class="img-responsive"/> 
 
       </div> 
 
       <div class="row" style="height:200px;"> 
 
        <div class="col-xs-12">Fourth column title</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-1"></div> 
 
</div>