如何在浏览器宽度/高度发生变化时使用CSS动态调整图像大小？
如何在浏览器宽度/高度发生变化时使用CSS动态调整图像大小？
提问于 2011-01-14 03:25:40
我想知道如何让图像随浏览器窗口一起调整大小，到目前为止我已经做了here (或下载the whole site in a ZIP)。
这在Firefox中运行良好，但在Chrome中有问题:图像并不总是调整大小，它以某种方式取决于页面加载时的窗口大小。
这在Safari中也能正常工作，但有时会加载图像的最小宽度/高度。也许这是由图像大小引起的，我不确定。(如果加载正常，请尝试多次刷新以查看错误。)
我怎么才能让它更防弹呢？(如果需要JavaScript，我也可以接受，但CSS更可取。)
回答 5
Stack Overflow用户
发布于 2011-01-14 03:49:42
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};在IE中，onresize事件会在每个像素更改(宽度或高度)时触发，因此可能会有性能问题。使用javascript的window.setTimeout()将图像大小调整延迟几毫秒。
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
Stack Overflow用户
发布于 2014-07-09 17:07:03
将resize属性设置为both。然后，您可以像这样更改宽度和高度：
.classname img{
resize: both;
width:50px;
height:25px;
}Stack Overflow用户
发布于 2015-08-15 04:32:09
最初，我使用的是以下html/css：
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}<div>
<img src="..." />
</div>然后我将class="img"添加到<div>中，如下所示：
<div class="img">
<img src="..." />
</div>一切都开始变得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4684304
复制相关文章
相似问题