Question

我目前正在开发一个网站并实施了横幅广告。代码是

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

我希望图像能够自动重新调整大小以适应用户浏览器的分辨率。我该怎么做呢？

Answer 1

我添加了＆＃34;宽度：100％＆＃34;到＆＃34;＆＃34;和＆＃34; .container＆＃34;。

小提琴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标记样式。

Answer 2

您可以尝试这样：

img{
width: 100%;
height: 100%;
max-height: 300px;
}

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

2 个答案: