javascript - 尝试根据原始img高度/宽度设置img高度/宽度

Question

所以我试图用一个 li 容器和里面的图像来做一个图像库，根据原始图像的大小设置这个图像的宽度或高度，这就是我得到的结果。

<ul>
<li><a><img class='imgGal' src='oneHorizontalImg.jpg'></a></li>
<li><a><img class='imgGal' src='oneVerticalImg.jpg'></a></li>
<li><a><img class='imgGal' src='anotherHorizontalImg.jpg'></a></li>
</ul>

和 javascript 部分

if ( $('.imgGal').height() > $('.imgGal').width() ) {   
$('.imgGal').css('width','100%'); }
else {
$('.imgGal').css('height','100%');
};

但由于某种原因，即使我在执行警报时在页面底部设置此代码($('.imgGal').height());或者alert($('.imgGal').width())我得到的返回值为0，所以无论条件是什么，else总是适用。

另外，我不确定结果如何是我如何根据每个图像应用不同的结果。

无论如何，提前感谢您的帮助。

Answer 1

您可以将 javascript 添加到图像的加载事件中，以确保它们首先存在。

$('.imgGal').on('load', function(){
     if ( $(this).height() > $(this).width() ) {   
          $(this).css('width','100%'); }
     else {
          $(this).css('height','100%');
     };
});