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>

但出于某种原因，即使我在执行警报（$（'.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%');
     };
});

---

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

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

试试这个：

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

$.each('img', function(){
    if($(this).prop('complete'){
        resize(this)
    } else {
        $(this).on('load', function(){
            resize(this);
        }
    }
});

试试这个：

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

$.each('img', function(){
    if($(this).prop('complete'){
        resize(this)
    } else {
        $(this).on('load', function(){
            resize(this);
        }
    }
});

---

如果您准备以“水平”或“垂直”开始图像，您可以使用以下css

img.imgGal[src^="vertical"] {
    width: 100%;
}

img.imgGal[src^="horizontal"] {
    height: 100%;
}

---

如果您准备以“水平”或“垂直”开始图像，您可以使用以下css

img.imgGal[src^="vertical"] {
    width: 100%;
}

img.imgGal[src^="horizontal"] {
    height: 100%;
}

---

正如其他人所说，在使用JQuery对图像执行任何操作之前，您需要等待图像加载，否则它将无法找到它们

将代码放入就绪块：

$.(function() {

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

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

});

这将使代码只在页面完全加载后运行

还有一件事，我不确定结果会怎样，那就是我怎么能 不要根据每个img应用不同的结果

在这里，您可以选择做什么：

• 为每个图像指定一个单独的类或ID，并使用该类或ID应用不同的结果

例如：

<ul>
    <li><a><img id="img1" class="imgGal" src="oneHorizontalImg.jpg"></a></li>
    <li><a><img id="img2" class="imgGal" src="oneVerticalImg.jpg"></a></li>
    <li><a><img id="img3" class="imgGal" src="anotherHorizontalImg.jpg"></a></li>
</ul>
<script> 
    $("#img1").height(yourSpecialHeightValue);
</script>

var images = $("ul li");
images[0].height(100); //This will change the first image's height to 100
images[1].height(200); //The second to 200

请注意，如果您有多个ul元素，则必须为该ul提供一个类或id，并像这样引用它：

$（“ul.myUlClass li”）

• 通过图像源url引用它们（不推荐）

这里我不给你们举一个例子，因为我认为在有更简单的方法时，通过长字符串比较是不好的

---

最后一点注意：HTML通常使用双引号。您可能需要更改代码——我不确定有多少浏览器足够聪明，能够理解在有单引号的情况下您可能打算使用双引号。

正如其他人所说，您需要等待图像加载，然后才能使用JQuery对其做任何操作，否则它根本找不到它们

将代码放入就绪块：

$.(function() {

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

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

});

这将使代码只在页面完全加载后运行

还有一件事，我不确定结果会怎样，那就是我怎么能 不要根据每个img应用不同的结果

在这里，您可以选择做什么：

• 为每个图像指定一个单独的类或ID，并使用该类或ID应用不同的结果

例如：

<ul>
    <li><a><img id="img1" class="imgGal" src="oneHorizontalImg.jpg"></a></li>
    <li><a><img id="img2" class="imgGal" src="oneVerticalImg.jpg"></a></li>
    <li><a><img id="img3" class="imgGal" src="anotherHorizontalImg.jpg"></a></li>
</ul>
<script> 
    $("#img1").height(yourSpecialHeightValue);
</script>

var images = $("ul li");
images[0].height(100); //This will change the first image's height to 100
images[1].height(200); //The second to 200

请注意，如果您有多个ul元素，则必须为该ul提供一个类或id，并像这样引用它：

$（“ul.myUlClass li”）

• 通过图像源url引用它们（不推荐）

这里我不给你们举一个例子，因为我认为在有更简单的方法时，通过长字符串比较是不好的

---

最后一点注意：HTML通常使用双引号。您可能需要更改代码--我不确定有多少浏览器足够聪明，可以在有单引号的情况下使用双引号。

因为您需要等待图像加载可能重复因为您需要等待图像加载可能重复请注意已弃用，从jQuery 1.8开始。@Javalsu no作为一个简单的回答，我不这么认为（但我没有检查）；不过，从文档中很容易找到答案。而且，即使它们是，

ready

和

load

也不是等价的事件，所以我不相信结果会是你想要的，即使它确实适用于图像。是的，现在这一个似乎工作得最好，但我能用什么来代替load呢？是的，（'load'，…）不是不推荐的，这是在jquery语法中使用onload事件的方法。请注意，从jquery 1.8开始，onload事件已被弃用。@Javalsu no作为一个简单的回答，我不这么认为（但我没有检查）；不过，从文档中很容易找到答案。而且，即使它们是，

ready

和

load

也不是等价的事件，所以我不相信结果会是你想要的，即使它确实适用于图像。是的，现在这一个似乎工作得最好，但我能用什么来代替load呢？是的，（'load'，…）不是不推荐的，这是在jquery语法中使用onload事件的方法。此解决方案会丢失纵横比。它只会填满容器，扭曲图像。可能有一种方法可以用css来实现，但事实并非如此。这种解决方案会丢失纵横比。它只会填满容器，扭曲图像。可能有一种方法可以用css实现，但这不是它。