当浏览器的宽度/高度改变时，我如何使用CSS动态调整图像的大小？

20 浏览
0 Comments

当浏览器的宽度/高度改变时，我如何使用CSS动态调整图像的大小？

我想知道如何使图片随浏览器窗口的大小调整而变化。目前为止，这里是我所做的（或下载整个网站的ZIP包）。\n在Firefox中，这个方法可行，但在Chrome中有问题：图片并不总是调整大小，这似乎取决于页面加载时窗口的大小。\n在Safari中也可行，但有时图片以最小宽度/高度加载。也许这是由于图片大小引起的，我不确定。（如果加载正常，请尝试刷新几次以查看错误。）\n有什么办法可以更加健壮地实现这个功能吗？（如果需要使用JavaScript，我也可以接受，但更倾向于使用CSS。）

0

3 答案

0 Comments

当浏览器的宽度/高度发生变化时，如何使用CSS动态调整图像大小？

问题的出现原因是，在IE浏览器中，onresize事件在每个像素的改变（宽度或高度）时触发，因此可能会存在性能问题。解决方法是通过使用JavaScript的window.setTimeout()延迟几毫秒来调整图像大小。

解决方法的代码如下：

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
    window.setTimeout(function(){
        // 调整图像大小的代码
    }, 10);
};

此外，可以参考此链接了解如何解决IE浏览器中的onresize事件的问题。

0
0 Comments

如何在浏览器宽度/高度发生变化时使用CSS动态调整图像大小？

问题的原因：想要根据浏览器宽度/高度的变化动态调整图像大小，但不知道如何实现。

解决方法：使用视口相关单位可以简化操作。通过设置图像的宽度为100%，高度自适应，然后使用max-width属性将图像的宽度限制为视口宽度的50%。同样地，可以通过设置图像的高度为100%，然后使用max-height属性将图像的高度限制为视口高度的20%。这样就可以根据浏览器宽度/高度的变化来动态调整图像的大小。

0
0 Comments

问题的出现的原因是希望能够根据浏览器宽度/高度的变化动态调整图像的大小。解决方法是使用纯CSS，并且不需要使用媒体查询。只需为图像添加max-width:100%和height:auto属性即可使图像具有灵活性。在IE7中，max-width:100%和height:auto可以正常工作，但在IE8中不行，需要添加width:auto\9来修复。如果想要强制图像具有固定的最大宽度，只需将其放置在一个容器内，并设置容器的max-width属性。此外，还可以将图像包裹在一个

元素中，并设置其max-height和max-width属性，然后将图像的宽度和高度设置为100%。这种方法不需要使用JavaScript，适用于最新版本的Chrome、Firefox和IE浏览器。在测试中发现，当窗口缩小时，图像可以很好地调整大小，但当窗口增大到超过650px时，图像无法继续调整大小。对于不希望图像超出其原始大小的情况，可以使用更大的图像作为起点。某些情况下了auto\9的作用，它只在IE 7、8和9中应用样式。

0