Question

我正在尝试将图片拉伸到浏览器的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％您可以通过重新调整结果框大小来在下面更新的小提琴中尝试它。

请参阅DEMO

Answer 2

您需要将此添加到CSS以定位图像。这就是其他网站也在做这件事。

  #header img { width:100% }

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

2 个答案: