在引导程序 3 中制作一个 div 响应宽度/高度答案

【问题标题】：Make a div responsive width/height in bootstrap 3在引导程序 3 中制作一个 div 响应宽度/高度
【发布时间】：2015-06-07 05:02:41
【问题描述】：

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

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

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

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3 responsive-design

【解决方案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

【讨论】：

【解决方案2】：

我不建议您使用background-size:cover 放大图像，因为质量会下降，您可以清楚地看到差异，尤其是在移动视图上。

解决问题的最佳方法是使用更大尺寸的图片。例如，如果您的图像是 317x242px 并且块 (col-md-3) 达到 400px，则最好使用宽度比块大 2 倍的图像，在这种情况下为 800px（视网膜视图）。

因此，请勿将图像调整为大于实际大小，因为这不是一个好的解决方案。

【讨论】：

【解决方案3】：

我找到了解决办法。

我为我的 div 添加了 padding-top:76.34%。现在它保持维度。

(242/317)*100 = 76.34。

【讨论】：

【解决方案4】：

您可以对标签使用 class="img-responsive"，它会自动处理您提供的任何图像。

【讨论】：