Question

我公司的新网页布局取决于150px宽的图片。之前的设计要求图像高度为125px。因此，所有图像都根据宽度/高度比具有不同的宽度。我把一些javascript放在一起调整图像大小以适应他们的空间，直到我们的实习生在photoshop中调整图像大小。我的临时解决方案似乎在除了ie8之外的一切都很好，包括ie6的所有东西！这是代码。

$('div.item > div.left > a > img').load(function(){
    var img = $(this);
    img.each(function(){
        var width = img.width();
        var height = 125;
        var ratio = width/height;
        if(width > 150){
            var newWidth = 150;
            var newHeight = newWidth/ratio;
            img.attr({width:newWidth, height:newHeight});
        }
    });
});

非常感谢任何想法

Answer 1

有时，图像由浏览器控制，并且不会调用load事件。在这种情况下，尝试更改“每个”事件的图像大小。 Chrome和浏览器IE＆gt;图9的实施例可以缓存具有适当大小的图像，但是IE <= 8不能这样做。因此，我为IE＆lt; = 8。

包含了图像的条件大小调整

将以下内容添加到您的页面中：

<!--[if lt IE 9]>
<script type="text/javascript">
    $('div.item > div.left > a > img').each(function(){
    var img = $(this);
    img.each(function(){
    var`enter code here` width = img.width();
    var height = 125;
    var ratio = width/height;
    if(width > 150){
        var newWidth = 150;
        var newHeight = newWidth/ratio;
        img.attr({width:newWidth, height:newHeight});
    }
   });
});
</script>
<![endif]-->

Answer 2

更改

img.attr({width:newWidth, height:newHeight});

到

img.css({width:newWidth+'px', height:newHeight+'px'});

它可以按你的意愿工作。

Answer 3

您应该尝试处理图像对象本身

$('div.item > div.left > a > img').load(function(){
var img = $(this)[0];
img.each(function(){
    var width = img.width();
    var height = img.height();
    var ratio = width/height;
    if(width > 150){
        var newWidth = 150;
        var newHeight = newWidth/ratio;
        img.width(newWidth);
        img.height(newHeight));
    }
 });
});

Answer 4

我遇到了同样的问题。

我解决了这个问题：

$(window).load(function() {
....
});

它似乎在我的网站上工作。

javascript图像调整大小在ie8中不起作用

4 个答案: