带有背景图像的Div，根据屏幕尺寸设置的高度？

Question

我正在构建一个响应式网站。所以我正在进行一场不同屏幕尺寸的战斗。

我正在使用Twitter Bootstrap 3s的网格系统，所以一切都是基于百分比的。

例如，我有一个名为“feature1”的框。我已经设置为400px，在较小的屏幕上工作得很好。但是在更大的屏幕上，我希望能够匹配屏幕高度附近的某个地方。

之前有没有人实现过这个目标？

我愿意看看基于屏幕高度设置高度的jQuery替代方案。

我的CSS目前如下：

.feature1 {
background: red;
height: 400px;
}

.feature2 {
background: green;
height: 400px;
}

提前感谢您的帮助。

Answer 1

您可以使用background-size: 100%;，但请记住，它尚未在所有浏览器上实现

Answer 2

如果您有固定的宽度，则会遇到不同屏幕尺寸的问题。您应该使用最小/最大宽度并使用媒体查询来检测屏幕大小并根据屏幕大小丢弃CSS。

有关详细信息，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

试试这个

使用CSS Media查询可以设置离散宽度

@media (max-width: 979px) and (min-width: 768px) {
  .feature2 {
    height: whatever;
  }
}

在JQuery中

$(window).resize(function(){
  windWidth = $(window).width();
  $(".feature2").height(windWidth*.3);
});

Answer 4

你可以使用媒体查询的最小高度，你可以针对类似的各种屏幕。来了   背景大小 - ＆gt;您使用 100％或'封面'进行广告

      @media (min-height: 400px) and (max-height: 600px) {
     .feature2 {
    height: whatever;
   }
  }