javascript在firefox中工作,但不在chrome中工作

javascript在firefox中工作,但不在chrome中工作,javascript,jquery,css,Javascript,Jquery,Css,此代码: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); 在Firefox上运行正常,但在Chrome上运行不正常。#ad内部的img标签受到高度的限制,但如果这使它们太宽,我需要限制宽度。有没有更好的方法可以在所有浏览器上使用 图像的html如下所示: <img src

此代码:

$('#ad img').each(function(){
    if($(this).width() > 125){
        $(this).height('auto');
        $(this).width(125);
    }
});
在Firefox上运行正常,但在Chrome上运行不正常。
#ad
内部的
img
标签受到
高度的限制,但如果这使它们太宽,我需要限制宽度。有没有更好的方法可以在所有浏览器上使用

图像的html如下所示:

<img src='http://easyuniv.com/img/ads/".$ad['img']."' height='40px'>

您可以在不使用javascript的情况下实现这一点。 在css中使用此选项:

#ad img{
宽度:125px;
高度:自动;
溢出:隐藏;
}

您可以在不使用javascript的情况下实现这一点。 在css中使用此选项:

#ad img{
宽度:125px;
高度:自动;
溢出:隐藏;
}
您是否尝试过:

        $('#ad img').each(function(){
        if($(this).width() > 125) {
            $(this).css('height', 'auto');
            $(this).css('width',125);
        }
    })
您是否尝试过:

        $('#ad img').each(function(){
        if($(this).width() > 125) {
            $(this).css('height', 'auto');
            $(this).css('width',125);
        }
    })

我怀疑让你头疼的是图像负载的可变性。如果在代码运行时图像本身尚未加载,则其宽度将为0。您可能希望尝试使用加载处理程序并运行现有代码,以确保图像大小正确。注意:您需要使用现有代码来处理在添加加载处理程序之前加载映像的情况

$(function() {
    $('#ad img').on('load', function() {
          resize(this);
    }).each( function() {
          resize(this);
    });

    function resize(image) {
       var $image = $(image);
       if ($image.width() > 125) {
           $image.css( { height: 'auto', width: 125 } );
       }
    }
});

我怀疑让你头疼的是图像负载的可变性。如果在代码运行时图像本身尚未加载,则其宽度将为0。您可能希望尝试使用加载处理程序并运行现有代码,以确保图像大小正确。注意:您需要使用现有代码来处理在添加加载处理程序之前加载映像的情况

$(function() {
    $('#ad img').on('load', function() {
          resize(this);
    }).each( function() {
          resize(this);
    });

    function resize(image) {
       var $image = $(image);
       if ($image.width() > 125) {
           $image.css( { height: 'auto', width: 125 } );
       }
    }
});
尝试:

尝试:



但是,例如,如果图像是正方形,我不希望它的高度是125px,只有40x40。。。如果这使得唤醒我只改变宽度,而不是触摸高度。我会尝试,我不希望它改变图像的形状,虽然最大宽度现在可以工作,但基本上我希望它是由40高度和最大宽度,或125宽度与最大高度。最大值是保持图像自然比例的量,但是,例如,如果图像是正方形,我不希望它的高度为125px,仅为40x40。。。如果这使得唤醒我只改变宽度,而不是触摸高度。我会尝试,我不希望它改变图像的形状,虽然最大宽度现在可以工作,但基本上我希望它是由40高度和最大宽度,或125宽度与最大高度。这是因为在chrome中,你的图像是在代码执行后加载的,导致你出错。这是因为在chrome中,你的图像是在代码执行后加载的,导致你出错。我确实在$(文档)中有它准备好的我还需要这样做吗?@TroyCosentino Document ready可能会在所有图像加载完成之前触发。使用图像时,通常需要
ready()
-确保DOM中的元素,以及
load()
图像上的元素来处理图像本身的加载。这很有意义,感谢您的澄清。当我回到电脑前,我会试试这个。。您认为这对于不同浏览器的差异是有意义的吗?@TroyCosentino-使用文档(或窗口)加载事件来包装整个块也可能有效,这样就不需要将加载处理程序直接应用于图像。注意,这将延迟处理程序中的所有内容,直到页面完全加载。请参阅和的讨论。我确实在$(文档)中有它。准备好了吗。。。我还需要这样做吗?@TroyCosentino Document ready可能会在所有图像加载完成之前触发。使用图像时,通常需要
ready()
-确保DOM中的元素,以及
load()
图像上的元素来处理图像本身的加载。这很有意义,感谢您的澄清。当我回到电脑前,我会试试这个。。您认为这对于不同浏览器的差异是有意义的吗?@TroyCosentino-使用文档(或窗口)加载事件来包装整个块也可能有效,这样就不需要将加载处理程序直接应用于图像。注意,这将延迟处理程序中的所有内容,直到页面完全加载。请参阅和上的讨论。