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

Question

我试图让图像拉伸(stretch)浏览器的 100% 宽度，但我似乎在某处出错了。

这是一个 Fiddle.

我会在最后添加代码。

我找到了一些东西 similar但我无法理解他们的检查代码。

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

他们在使用 Jquery 吗？

提前致谢。

代码——

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%。
您可以通过调整结果框的大小在下面更新的 fiddle 中尝试。

参见 DEMO