Question

我有一个固定高度的div。

<div class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>

当我将屏幕调整到移动设备时，我的div宽度会响应并收缩，但高度仍保持不变。

很难提出我的问题，但无论如何都要使用固定的高度，但要让它响应？

Answer 1

将@media查询添加到您的css文件以覆盖原始查询。像这样：

@media screen and (min-width: 1024px) {
    myNewDivHeight{
        height:250px;
    }
}

将此类添加到div中，如：

class="col-md-12 myNewDivHeight"

当屏幕res。超过1024px这将工作。当你缩小它将无法工作，因此bootstraps响应将触发。或者，您可以为其他分辨率添加新媒体查询。

Answer 2

试试这个：

.replace(/^#/,"")

并在您的div中添加ID，例如id =“d1”

<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>

同样在bootstrap中，您可以添加class =“img-responsive”以使您的图像响应像这样：

<div id="d1" class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>

Bootstrap CSS固定高度为div

2 个答案: