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

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

<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">
......

它不起作用

这有时有效

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

        $(this).load(function(){

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

        });
    });

---

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

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

如果不添加高度属性，图像将保持其原始比例

否则，您可以使用JavaScript执行此操作，如下所示：

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

编辑： 如果图像上没有ID：

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

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

---

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

$(window).load(function(){

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

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

    });

});

希望这有帮助

显然，还有其他更好的方法可以做到这一点，比如在加载时设置每个图像的高度，但这应该足够了

看看jQuery插件，也许可以将上面的$封装在它的一个方法中，例如：

imagesLoaded( '#yourContainer', function() {

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

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

    });

});

---

$'img.adjust image'返回具有class=adjust image class属性的所有元素的数组。因此，我们可以为其下的所有图像添加“高度”属性。

您是指图像的原始大小吗？需要更多信息，您将根据什么设置这些值？因为如果您要设置imagem的原始大小，您就不需要它了。让它为空，img将采用图像中的高度大小，但如果您想设置其他值，您将如何设置它？如何在所有图像中精确区分高度，哪一个应该得到多少？不要设置高度，它将自动使用适当的高度来保持纵横比。如果您需要手动设置，公式为：新高度=原始高度/原始宽度x新宽度。否则，只需根据上述注释设置宽度。这是正确的，但这不是问题的好答案。谢谢！但我确实需要添加这些属性。我怎么能这么做？为什么会有人这么做？唯一的效果是，如果图像尚未加载，高度将设置为零，图像将永远不会显示。@Fredrik你说的对，我编辑了我的文章。我们可以在加载函数中执行此操作以防止这种行为。谢谢！我必须为每个img标签添加一个“imgID”吗？对不起，我没有意识到你的图像上没有ID。您可以使用document.getElementsByTagNameimg并对返回的所有元素执行此操作。我已使用代码编辑了我的帖子，这样做不会在图像上显示ID。谢谢！它起作用了。但是它只对第一个img标签有效，其他的等于0，所以weirdI只是重新检查，这确实有效，但是你必须等到图像完全加载。我已经更新了我的答案，加入了关于使用插件的解释。

imagesLoaded( '#yourContainer', function() {

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

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

    });

});

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