Javascript Jquery获取调整后的宽度/高度

我正在尝试在调整图像大小后获取图像的宽度或高度（取决于屏幕大小）。这是一个画廊，我正试图使外层的div紧紧围绕着它，但它没有得到图像的大小，它只有0px。它试图获取的值在CSS中被设置为“auto”，那么为什么设置之后它不能获取实际值呢

有什么想法吗？这是我目前得到的

Javascript:

function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$("#image_holder_main").css({"height": (vph - 30) + "px", "width" : (vpw - 30) + "px"});
if(vpw > vph){
    $("#image_main").css({"height": (vph - 30) + "px", "width" : "auto"});
    $("#image_large").css({"height": (vph - 30) + "px", "width" : $("#image_main").outerWidth() + "px"});
}else if(vph > vpw){
    $("#image_main").css({"height": "auto", "width" : (vpw - 30) + "px"});
    $("#image_large").css({"height": $("#image_main").outerHeight() + "px", "width" : (vpw - 30) + "px"});
}
//$("#image_large").css({"height": $("#image_main").outerHeight() + "px", "width" : $("#image_main").outerWidth() + "px"});

<div id="image_large">
        <section id="image">
            <header id="image_large_head">
                <div id="close_image"><a href="#" id="but_close_image">X</a></div>
            </header>
            <div id="image_holder_main">
                <img src="http://theteakman.co.uk/images/decks/Sunseeker/IMG_0166.JPG" id="image_main" title="Boat Picture">
            </div>
        </section>
    </div>

#image_large{
    position: fixed;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    z-index: 1000;
}
#image_holder_main{
    width: 100%;
    height: 100%;
}

HTML:

function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$("#image_holder_main").css({"height": (vph - 30) + "px", "width" : (vpw - 30) + "px"});
if(vpw > vph){
    $("#image_main").css({"height": (vph - 30) + "px", "width" : "auto"});
    $("#image_large").css({"height": (vph - 30) + "px", "width" : $("#image_main").outerWidth() + "px"});
}else if(vph > vpw){
    $("#image_main").css({"height": "auto", "width" : (vpw - 30) + "px"});
    $("#image_large").css({"height": $("#image_main").outerHeight() + "px", "width" : (vpw - 30) + "px"});
}
//$("#image_large").css({"height": $("#image_main").outerHeight() + "px", "width" : $("#image_main").outerWidth() + "px"});

<div id="image_large">
        <section id="image">
            <header id="image_large_head">
                <div id="close_image"><a href="#" id="but_close_image">X</a></div>
            </header>
            <div id="image_holder_main">
                <img src="http://theteakman.co.uk/images/decks/Sunseeker/IMG_0166.JPG" id="image_main" title="Boat Picture">
            </div>
        </section>
    </div>

#image_large{
    position: fixed;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    z-index: 1000;
}
#image_holder_main{
    width: 100%;
    height: 100%;
}

---

请包括你的HTML和CSS。它应该可以工作。如果图像未隐藏。图像大小正确，但对于宽屏幕桌面，包含div的宽度为0px，而它应为图像的宽度。无法获取隐藏元素的尺寸。。。就浏览器而言，它们没有尺寸，但它不是隐藏的，而是可见的。它是在调用函数之前显示块的-很抱歉没有添加它。请包括您的HTML和CSS。它应该可以工作。如果图像未隐藏。图像大小正确，但对于宽屏幕桌面，包含div的宽度为0px，而它应为图像的宽度。无法获取隐藏元素的尺寸。。。就浏览器而言，它们没有尺寸，但它不是隐藏的，而是可见的。它是在调用函数之前显示block的-很抱歉没有添加它。