jquery - 获取 img 的原生/自然宽度并设置为最大宽度

Question

我有一组不同宽度的图像。我希望它们的宽度为 100% 以提高响应速度，但不要大于它们的实际尺寸。

我试过:

$("#mainImg").on('load', function() {
var natWidth = $(this).get(0).naturalWidth;
alert(natWidth);
});

但没有任何警报。

我也试过这个，再次没有警告:

var myImage = document.getElementById("mainImg");
myImage.addEventListener('load', function() {
    alert('My width is: ', this.naturalWidth);
});

显然，我遗漏了什么!

一旦我可以获取宽度，我想我可以轻松地使用它来设置图像的最大宽度。

Answer 1

我使用您的代码将这段代码放在一起，对我来说效果很好。我怀疑您的 mainImg ID 实际上并不是指 img 标记，而是可能是一个封闭的 div 或类似的标记。那可能吗？

另外，是的，很容易将最大宽度设置为 naturalWidth 值。只需使用 attr。我也在代码中放了一个例子。

$(document).ready(function($) {
    $('#myImg').on('load', function(e) {
        var natWidth = $(this).get(0).naturalWidth;
        alert(natWidth);
        $(this).attr('maxwidth', natWidth);
        alert($(this).attr('maxwidth'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="myImg" src="http://ppls.robertrodes.com/includes/images/Dashboard%20Mockup2.png" />