我试图在调整图像大小后获得图像的宽度或高度(取决于屏幕的大小)。这是一个画廊,我试图让外部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%;
}