HTML 自动调整横幅以适应不同的屏幕分辨率？

Question

<分区>

Answer 1

我在“”和“.container”中添加了“width: 100%”。

fiddle here

这是新代码。

<div id="banner">
    <div id="wrapper" style="width:100%; overflow:hidden;">
        <div id="container" style="width:100%; margin-right:auto;">
                <A HREF="http://www.nalashirts.com"><img style="width: 100%;" src="http://i.imgur.com/jdoascd.png" alt="N.A.L.A. Apparel"/>
        </div>
    </div>
</div>

这可以在没有内联样式的情况下解决。这是新的 HTML:

<div id="banner">
    <div id="wrapper">
        <div id="container">
                <a href="http://www.nalashirts.com"><img class="banner-img" src="http://i.imgur.com/jdoascd.png" alt="N.A.L.A. Apparel"></a>
        </div>
    </div>
</div>

以及对应的CSS:

#wrapper {
    width: 100%;
    overflow: hidden;
}
#container {
    width: 100%;
    margin: 0 auto;
}
.banner-img {
    width: 100%;
}

注意:我们使用 banner-img 作为类名是为了不覆盖默认的 img 标签样式。