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（））;或警告（$（'。imgGal'）。width（））我得到返回值0，所以无论条件是什么，总是应用else。

另外，另外一件事我不知道结果是如何根据每个img应用不同的结果。

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

Answer 1

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

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

Answer 2

试试这个：

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);
        }
    }
});

Answer 3

如果您准备以“水平”或“垂直”方式启动图像，可以使用以下css

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

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

Answer 4

正如其他人所说，你需要等待图像加载才能用JQuery对它们做任何事情，否则它根本找不到它们。

将代码置于就绪块中：

$.(function() {

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

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

});

这应该使代码只在页面完全加载后运行。

另外，另外一件事我不知道结果如何，我怎么可能根据每个img来应用不同的结果。

您可以选择在此处执行的操作：

为每个图像指定一个单独的类或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")。

通过图片来源网址（不推荐）

我不打算在这里给你一个例子，因为我认为通过长串比较来做这件事并不是一个好主意。

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

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

4 个答案: