Question

我的图片是我的标题。这是我简单的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;
}

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

Answer 1

没有把你的问题安静得很好，但我认为你错过了这里的价值

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

Demo

正如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;
}

Reference Link

Answer 2

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

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

如何使全宽图像响应

2 个答案: