CSS div的Bootstrap CSS固定高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34557117/
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
Bootstrap CSS fixed height for div
提问by RDBWSF
I have a div with a fixed height.
我有一个固定高度的 div。
<div class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>
When I resize the screen to mobile, my div width is responive and shrinks but the height still keeps the same.
当我将屏幕调整为移动设备时，我的 div 宽度响应并缩小，但高度仍然保持不变。
It's quite hard to formulate my question but is there anyway to use a fixed height but make it responsive ?
很难提出我的问题，但无论如何使用固定高度但使其响应？
回答by Atilla Arda A??kg?z
Add @media query to your css file to override the original one. Something like this:
将 @media 查询添加到您的 css 文件以覆盖原始查询。像这样的东西：
@media screen and (min-width: 1024px) {
myNewDivHeight{
height:250px;
}
}
Add this class to your div like:
将此类添加到您的 div 中，例如：
class="col-md-12 myNewDivHeight"
When the screen res. is over 1024px this will work. When you shrink it will not work, so bootstraps responsive will trigger. Or you can add new media queries for other resolutions.
当屏幕恢复。超过 1024px 这将起作用。当你缩小它不会工作，所以引导响应将触发。或者您可以为其他分辨率添加新的媒体查询。
回答by John_P
try this :
尝试这个 ：
<style>
@media screen and (min-width: 1024px) {
#d1{
height:250px;
}
}
@media screen and (max-width: 800px) {
#d1{
height:150px;
}
}
@media screen and (max-width: 600px) {
#d1{
height:100px;
}
}
<style>
and add Id to your div for example id="d1"
并将 Id 添加到您的 div，例如 id="d1"
<div id="d1" class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>
Also in bootstrap you can add class="img-responsive" to make your image responsive like this :
同样在引导程序中，您可以添加 class="img-responsive" 以使您的图像响应如下：
<img class="img-responsive" src="example.png" />
