如何给img标签添加高度属性？

例如，我有很多图像，所有图像的原始宽度为100px，但原始高度不同。如何根据这些图像的原始高度自动添加高度属性。如如何给img标签添加高度属性？

<img src="picture.jpg" width="100" height="132"> 
<img src="picture.jpg" width="100" height="45"> 
<img src="picture.jpg" width="100" heighst="321"> 
<img src="picture.jpg" width="100" height="136"> 
<img src="picture.jpg" width="100" height="214"> 
......

我试试这个，我试图让每一个影像第一的原始高度，

$(document).ready(function() { 
$items = $('img'); 
$.each($items,function(k, v){ 
    console.log(v.naturalHeight); 
    }); 
    });

它不工作

这个工作有时

$items = $('img'); 
    $.each($items,function(k, v){ 

     $(this).load(function(){ 

      console.log($(this)[0].naturalHeight); 
      $(this).attr('height', $(this)[0].naturalHeight); 

     }); 
    });

问题是，在运行脚本之前，如何确保所有图像都已加载？

来源

2013-11-04 ttyy

您的意思是图片的原始尺寸？ –

需要更多信息，你会把这个值放在什么基础上？如果您将设置imagem的原始大小，那么您就不需要它了。让它为空，img将假定图像的高度大小，但是如果你想设置其他值，你将如何设置它？ – Guerra

你是如何完全不同高度的所有图像，哪一个应该得到多少？ –

最简单的实现是等待为所有图像加载，然后使用JavaScript设置属性（我注意到你正在使用jQuery）。

$(window).load(function(){ 

    $.each($('img'), function(){ 

     // Set the height, hard-style! 
     $(this).attr('height', $(this).height()); 

    }); 

});

希望这有助于！很显然，还有其他的 - 可以说更好的方法来做到这一点（比如设置每个图像的高度），但这应该就足够了。

看一看在imagesLoaded jQuery插件，也许包装上面$.each()在它的方法之一，例如：

imagesLoaded('#yourContainer', function() { 

    $.each($('img'), function(){ 

     $(this).attr('height', $(this).height()); 

    }); 

});

来源

2013-11-04 13:34:11 Labu

谢谢！有用。但它只适用于第一个img标签，其他的等于0，所以很奇怪 – ttyy

我只是重新检查，这确实有用，但是您需要等待图像完全加载。我已经更新了我的答案，包括使用插件的解释。 – Labu

根本不需要添加高度属性，只有宽度和图像会自动缩放。

来源

2013-11-04 13:16:45 Roman

这是真的，但是这不是一个好的答案。 – putvande

谢谢！但我确实需要添加这些属性。我怎样才能做到这一点？ – ttyy

如果您不指定高度，图像将保持其原始比例。

否则，您可以用JavaScript做到这一点，就像这样：

function loaded() { 
    var img = document.getElementById("imgID"); 
    img.style.height = img.height; 
}

编辑：如果没有图片上的标识：

function loaded() { 
    var images = getElementsByTagName(img); 

    for(i = 0; i < images.length; i++) { 
     images[i].style.height = img.height; 
    } 
}

来源

2013-11-04 13:20:59 Emilie

为什么有人会这样做？它唯一的影响是，如果图像尚未加载，高度将被设置为零，图像将永远不会显示。 –

@Fredrik你是真的，我编辑我的帖子。我们可以在loaded（）函数中做到这一点，以防止这种行为。 – Emilie

谢谢！我必须为每个img标签添加一个“imgID”吗？ – ttyy

(function(){ 
    $("img.adjust-image").height("100px"); 
})()

$('img.adjust-image')返回阵列上，class=adjust-image类的所有<img>元素属性。因此，我们可以为其下的所有图像添加height属性。

来源

2013-11-04 13:48:19 Kundu

如何给img标签添加高度属性？

回答

相关问题