jquery - 为什么图像不是 100% 以及如何使其适应浏览器？

Question

我正在尝试使图像拉伸浏览器的 100% 宽度，但我似乎在某个地方出错了。

这是一个小提琴。

我将在最后添加代码。

我发现了类似的东西，但在检查时我无法理解他们的代码。

他们如何使图像适应浏览器？

他们在使用 Jquery 吗？

提前致谢。

代码——</p>

HTML：

<div id="header">
   <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Collin Hughes">
</div>
    <div id="outer" >
        <div id="inner"></div>
</div>
    </body>

CSS：

body, html {
     margin: 0;
     width: 100%;
     }

#header{
     position: relative;
     width: 100%;
     height:auto;
     background-size: 100%;
     margin: 0;
     }

#outer{
     position: relative;
     width: 90%;
     height: 500px;
     background-color: red;
     margin-top:30px;
     margin-right: auto;
     margin-bottom: 30px;
     margin-left: auto;
     padding: 20px 0 0 0;


}

#inner{
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
     top: 20px;
}

Answer 1

您没有在图像上设置宽度，而只是在#header.
您可以添加以下内容来解决此问题：

#header img{
    width: 100%;
}

即使更改浏览器大小，这也将确保宽度始终为 100%。
您可以通过重新调整结果框的大小在下面更新的小提琴中进行尝试。

见演示

Answer 2

您需要将此添加到您的 CSS 以定位图像。这也是其他网站的做法。

  #header img { width:100% }