Question

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

我的问题的一个JSFiddle：https://jsfiddle.net/qd7t1p8j/2/ （将输出窗口的大小调整为＆lt; 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，但这实际上会在缩小时隐藏图像的内容。

Answer 1

您可以将图像的高度除以宽度，以获得图像的纵横比百分比，然后将其用作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>

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

1 个答案: