Question

我的显示缩略图为250px×250px。我希望能够在单击缩略图时检索其原始宽度和高度。

到目前为止我的小提琴：http://jsfiddle.net/bf44f48p/

我试过这样做：

$(function() {
    $(".img_section").on('click', function() {
        var img = $(this).children(".test_img").attr("src");
        theImg.src = img.attr("src");

        var imgNaturalWidth = theImg.width();
        var imgNaturalHeight = theImg.height();

        alert(imgNaturalWidth);
        alert(imgNaturalHeight);
}) // not working

任何帮助将不胜感激，谢谢。

Answer 1

演示 - http://jsfiddle.net/victor_007/bf44f48p/5/

$(function () {
    $(".img_section").on('click', function () {
        $this = $(this).children('img');
        var image = new Image();
        image.src = $this.attr("src");
        image.onload = function () {
            alert('width: ' + this.width +' '+'height: '+ this.height); /* calculation the width  and height from image onload */
        };
    });
});

$(function () {
    $(".img_section").on('click', function () {
        $this = $(this).children('img');
        var image = new Image();
        image.src = $this.attr("src");
        image.onload = function () {
            alert('width: ' + this.width +' '+'height: '+ this.height);
        };
    });
});

.img_section {
    background: black;
    position: relative;
    width: 100%;
    /* for IE 6 */
}
.test_img {
    width:250px;
    height:250px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="img_section">
    <img class="test_img" src="http://i.imgur.com/MwegAOI.jpg" alt="logo">
</div>

Answer 2

您可以使用naturalWidth＆amp;找到原始宽度和高度。 HTML 5中的naturalHeight。

$(function () {
        var height = document.getElementById('img1').naturalHeight;
        var width = document.getElementById('img1').naturalWidth;
        alert("Original Height:" + height + " Original Width:" + width);
    });

如何检索原始图像长度＆amp;高度与jquery？

2 个答案: