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

所以我想做一个带有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%');
};

但是由于某些原因，即使我执行Alert（$（'。imgGal'）。height（））时，也要在页面底部设置此代码；或alert（$（'。imgGal'）。width（））我得到的返回值为0，所以无论条件是什么，都将始终应用else。

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

无论如何，在此先感谢您提供的所有帮助。

最佳答案

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

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