调整后Jquery得到宽度/高度

时间:2016-01-02 14:47:37

标签: javascript jquery html css

我试图在调整图像大小后获得图像的宽度或高度(取决于屏幕的大小)。这是一个画廊,我试图让外部div紧紧围绕它,但它没有达到图像的大小,它只获得0px。它试图得到的值被设置为" auto"在CSS中,为什么在设置之后它能获得实际值?

有什么想法吗?这就是我现在所拥有的。

使用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"});

HTML:

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

CSS:

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

0 个答案:

没有答案