twitter-bootstrap 在 bootstrap 3 中制作一个 div 响应宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23931221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a div responsive width/height in bootstrap 3
提问by user1452062
I have an image container with an image. The size is 317x242px. I placed the image-containerinside a col-md-3div. The width is a little bit larger in bootstrap, not exactly 317px, but it's not problem, because I'm using background-size:coverto fill the whole div.
我有一个带有图像的图像容器。大小为 317x242 像素。我在image-container里面放了一个col-md-3div。bootstrap 的宽度有点大，不完全是 317px，但这不是问题，因为我是background-size:cover用来填充整个 div 的。
How is it possible to keep the dimension, if the width smaller/higher than 317px?
如果宽度小于/大于 317px，如何保持尺寸？
回答by Dyspraxic Designer
Hope this helps!
希望这可以帮助！
I have created a few more classes and used placeholders to give you an idea of the outcome.
我创建了更多类并使用占位符让您了解结果。
<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%;
}
回答by paulalexandru
I don't recomand you to use background-size:coverto enlarge the image because the quality will decrease and you can clearly see the diference especially on mobile view.
我不建议您使用background-size:cover放大图像，因为质量会降低并且您可以清楚地看到差异，尤其是在移动视图上。
The best way to fix your problem is to use images with bigger dimensions. For example if you image is 317x242px and the block (col-md-3) reach 400px, it's best to use images with a 2 times bigger width than the block, for this case 800px (retina view).
解决问题的最佳方法是使用更大尺寸的图像。例如，如果您的图像是 317x242 像素并且块 ( col-md-3) 达到 400 像素，则最好使用宽度比块大 2 倍的图像，在这种情况下为 800像素（视网膜视图）。
So, don't resize images bigger than their actual size because it's not a good solution.
因此，不要将图像调整为大于其实际大小，因为这不是一个好的解决方案。
回答by doeiqts
You can use class="img-responsive" to the tag and it will automatically handle whatever image you give it.
您可以对标签使用 class="img-responsive"，它会自动处理您提供的任何图像。
回答by user1452062
I found the solution.
我找到了解决方案。
I added padding-top:76.34% for my div. Now it keeps the dimension.
我为我的 div 添加了 padding-top:76.34%。现在它保持尺寸。
(242/317)*100 = 76.34.
(242/317)*100 = 76.34。
