获取动态图像的宽度和高度 [英] getting width and height of a dynamic image

问题描述

我在一个隐藏的div中嵌入了一个img标签.当用户单击具有图像名称的动态超链接时，必须在模式窗口中显示图像.为了将div定位在模态窗口内，需要图像高度.但是，当单击超链接时，在指定src之后，高度将变为0.因此图像无法在中间对齐.请帮助我获取图像的宽度，然后再将其显示在浏览器中.

I have a img tag embedded inside a hidden div. When the user clicks on a dynamic hyperlink, having the image name, the image has to be showed in a modal window. For positioning the div inside the modal window, the image height is required. But when the hyperlink is clicked, the after the src is assigned, the height is coming as 0. So the image cannot be aligned in the middle. Please help me to get the width of the image before the it is shown in the browser.

<div id="imgFullView" class="modal_window imgFullView">
    <img alt="Loading..." id="imgFull" />
</div>

function ShowImage(imgSrc) {
    $("#imgFull").attr("src", imgSrc);
    alert($("#imgFull").height());
    $("#imgFullView").width($("#imgFull").width());
    $("#imgFullView").height($("#imgFull").height());
    show_modal('imgFullView', true);
}

此showimage方法将称为超链接的onclick. 在此先感谢...

This showimage method would be called onclick of the hyperlink. Thanks in Advance...

在您的专业指导下，对我有用的解决方案...

Solution that worked for me, after all ur professional guidance...

 function ShowImage(imgSrc) {
    $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag.
    $("#imgFull").attr("src", imgSrc);
    $("#imgFullView").width(document.getElementById("imgFull").width);
    $("#imgFullView").height(document.getElementById("imgFull").height);
    show_modal('imgFullView', true);
 }

推荐答案

尝试一下.

    var img = $("imgFull")[0]; // Get my img elem
    var real_width, real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(imgFull).attr("src"))
        .load(function() {
            real_width = this.width;   // Note: $(this).width() will not
            real_height = this.height; // work for in memory images.
        });

谢谢.

这篇关于获取动态图像的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！