twitter-bootstrap - 在 bootstrap 3 中制作一个 div 响应宽度/高度

Question

我有一个带有图像的图像容器。尺寸为 317x242px。我将 image-container 放在 col-md-3 div 中。 bootstrap 中的宽度有点大，不完全是 317px，但这不是问题，因为我使用 background-size:cover 来填充整个 div。

如果宽度小于/大于 317px，如何保持尺寸？

http://www.bootply.com/6waABmJhuL

Answer 1

希望这对您有所帮助!

我创建了更多类并使用占位符让您了解结果。

<div class="container">
  <div class="row">
    <div class="col-md-3">
        <div class="image-container">
          <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    <div class="col-md-3">
        <div class="image-container">
         <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    <div class="col-md-3">
        <div class="image-container">
          <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    </div>
</div>


/* CSS used here will be applied after bootstrap.css */
.col-md-3{
  width:30%;
  }
.image-container {
    background:red;
    border: 2px solid red;      
}

img{ width: 100%;
}

Booty of Original code