1

我有一个图像是我的标题。这是我的简单 HTML：

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

它填满了页面的整个宽度，但我必须指定它显示的高度。这是CSS：

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 250px;
}

如何使此图像具有响应性？现在，当我展开页面时，它会到达无法识别图片的地步。

4

2 回答 2

5

没有很好地解决您的问题，但我认为您在这里缺少价值

background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
              --^---

CSS

.wrapper {
  background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 250px;
}

演示

正如 ralph.m 建议的那样，如果您将此图像用作您的网站背景，则不要使用元素background上的属性body而不是div

您需要使用以下 CSS 来使背景响应

body { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

参考链接

于 2013-05-03T11:17:35.940 回答
0

您需要仔细考虑您希望/期望它如何工作。如果 div 中没有一些实际内容，它的高度将为零，这就是为什么需要在其上设置高度的原因；但总的来说，尽量避免设置高度。据推测，如果这是一个“包装器”，它将包装一些内容，使其保持打开状态，而无需设置高度。

至于背景图像，您需要考虑它的行为方式。您只是希望它出现在顶部的条带中吗？如果您使用 Mr Alien 的解决方案，请注意图像会越来越宽，并且开始看起来很奇怪。所以我们需要更多关于你在这里尝试做什么的信息。

于 2013-05-03T11:27:18.007 回答