通过CSS响应地设置div的高度

我需要找到一种方法来根据窗口宽度响应地设置div的高度（以px为单位）。我使用的是Bootstrap 3，并且可以使用媒体查询来设置特定断点宽度的高度，但是当您的页面内容达到767px以下时，页面内容变为全角和“流畅”，不断变化大小。通过CSS响应地设置div的高度

我的问题的JSFiddle：https://jsfiddle.net/qd7t1p8j/2/ （调整输出窗口的大小，以< 767px尺寸查看问题 - 请注意黄金背景颜色）。

这是我的代码现在：

HTML：

<div class="header-banner"></div>

CSS：

.header-banner { 
    margin-bottom: 0; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: center; 
} 

@media screen and (min-width: 1199px) { 
    .header-banner { 
    height: 145px !important; 
    background-image: url('http://placehold.it/1314x167/'); 
    } 
} 

@media screen and (max-width: 1199px) { 
    .header-banner { 
    height: 120px !important; 
    background-image: url('http://placehold.it/1314x167/'); 
    } 
} 

@media screen and (max-width: 991px) { 
    .header-banner { 
    height: 103px !important; 
    background-image: url('http://placehold.it/1170x167/'); 
    } 
} 

@media screen and (max-width: 767px) { 
    .header-banner { 
    height: 170px !important; 
    background-image: url('http://placehold.it/768x170/'); 
    background-color: gold; 
    } 
}

我非常希望能够通过CSS纯粹做到这一点，而不是通过JavaScript检查窗口的大小（因为它可能并不总是在客户端的机器上）。

我试图以最小的屏幕尺寸将我的background-size属性更改为cover，但这实际上会在缩小时隐藏图像的内容。

来源

2017-02-21 mpdc

这样吗？ https://jsfiddle.net/qd7t1p8j/3/ –

我没有在这里100％。 DIV有一定的高度的要求是什么？ – hungerstar

不，这不是我想改变的图像高度。这是div的高度（请注意问题标题）我想更改 - 以匹配图像的高度。 – mpdc

您可以将图像的高度除以宽度，以百分比形式获得图像的纵横比，然后将其用作div中的填充以在div中创建相同的纵横比。

body { 
 
    background: gray; 
 
} 
 

 
.container { 
 
    background: white; 
 
} 
 

 
.header-banner { 
 
    margin-bottom: 0; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
} 
 

 
.navbar { 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
} 
 

 
.navbar-inverse { 
 
    border-color: #9a1114; 
 
    background-color: #cd171a; 
 
} 
 

 
.navbar-inverse .navbar-nav > li > a { 
 
    color: white; 
 
} 
 

 
.navbar-inverse .navbar-nav > li > a:hover, 
 
.navbar-inverse .navbar-nav > li > a:focus { 
 
    background-color: #9a1114; 
 
} 
 

 
.navbar-inverse .navbar-nav > .active > a, 
 
.navbar-inverse .navbar-nav > .active > a:hover, 
 
.navbar-inverse .navbar-nav > .active > a:focus { 
 
    background-color: #9a1114; 
 
} 
 

 
.navbar-inverse .navbar-nav > .open > a, 
 
.navbar-inverse .navbar-nav > .open > a:hover, 
 
.navbar-inverse .navbar-nav > .open > a:focus { 
 
    background-color: #9a1114; 
 
} 
 

 
.navbar-inverse .navbar-toggle { 
 
    border-color: #9a1114; 
 
} 
 

 
.navbar-inverse .navbar-toggle:hover, 
 
.navbar-inverse .navbar-toggle:focus { 
 
    background-color: #9a1114; 
 
} 
 

 
.navbar-inverse .navbar-collapse, 
 
.navbar-inverse .navbar-form { 
 
    border-color: #9a1114; 
 
} 
 

 
@media (max-width: 991px) { 
 
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { 
 
    color: white; 
 
    } 
 
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    background-color: #9a1114; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a, 
 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
 
    padding: 10px 15px; 
 
    } 
 
    .dropdown-menu { 
 
    padding: 0; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1199px) { 
 
    .header-banner { 
 
    height: 145px !important; 
 
    background-image: url('http://placehold.it/1314x167/'); 
 
    } 
 
} 
 

 
@media screen and (max-width: 1199px) { 
 
    .header-banner { 
 
    height: 120px !important; 
 
    background-image: url('http://placehold.it/1314x167/'); 
 
    } 
 
} 
 

 
@media screen and (max-width: 991px) { 
 
    .header-banner { 
 
    height: 103px !important; 
 
    background-image: url('http://placehold.it/1170x167/'); 
 
    } 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
    .header-banner { 
 
    height: 0!important; 
 
    padding-top: 22.13541667% !important; 
 
    background-image: url('http://placehold.it/768x170/'); 
 
    background-color: gold; 
 
    } 
 
}

<div class="container"> 
 
    <p class="header-banner"> 
 

 
    </p> 
 
    <div class="navbar navbar-inverse"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" style="padding: 0"> 
 
     <ul class="nav navbar-nav" style="margin: 0"> 
 
     <li class="active"><a href="#">HOME</a></li> 
 
     <li><a href="#">EXAMPLE</a></li> 
 
     <li><a href="#">EXAMPLE 2</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-21 15:46:39

通过CSS响应地设置div的高度

回答

相关问题