HTML 自动调整横幅以适应不同的屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25585693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Auto Resizing banner to fit different screen resolutions?
提问by Imran Chowdhry
I am currently working on a website and implemented a banner. The code is
我目前正在一个网站上工作并实现了一个横幅。代码是
<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>
I want the image to re-size automatically to fit the resolution of the users browser. How would I go about that?
我希望图像自动调整大小以适应用户浏览器的分辨率。我该怎么做？
回答by Trevor Hutto
I added a "width: 100%" to the "" and ".container".
我在“”和“.container”中添加了“width: 100%”。
Fiddle here
在这里摆弄
Here is the new code.
这是新代码。
<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>
This can be fixed without inline styles. Here is the new HTML:
这可以在没有内联样式的情况下修复。这是新的 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>
And the corresponding CSS:
以及相应的 CSS：
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 100%;
margin: 0 auto;
}
.banner-img {
width: 100%;
}
Note: We use banner-imgas the class name to not overwrite the default imgtag styles.
注意：我们banner-img用作类名是为了不覆盖默认img标签样式。
回答by Rahul Tripathi
You may try like this:
你可以这样尝试：
img{
width: 100%;
height: 100%;
max-height: 300px;
}
