动态图像调整大小

Question

我在网页上有一张图片，需要拉伸以适应窗口中的可用空间，同时保持其比例。下面是我得到了什么：

http://www.lammypictures.com/test/

我想大的图像按比例拉伸企及的高度和浏览器的宽度，减去的div的左侧和底部的大小。

所以问题真的是2折;首先我需要得到最大高度和宽度减去链接和图像栏，其次我需要调整浏览器的图像大小，同时保持比例。

任何帮助将不胜感激。

干杯 CIP

Answer 1

你可以尝试使用jQuery UI缩放效果：

$(document).ready(function() { 

    resizeImage(); // initialize 

    $(window).resize(function() { 
     resizeImage(); // initialize again when the window changes 
    }); 

    function resizeImage() { 
     var windowHeight = $(window).height() - $('#nav').height(), 
      windowWidth = $(window).width(), 
      percentage = 0; 

     if (windowHeight >= windowWidth) { 
      percentage = (windowWidth/$('#image').width()) * 100; 
     } 
     else { 
      percentage = (windowHeight/$('#image').height()) * 100; 
     } 

     $('#image').effect('scale', { percent : percentage }, 1); 
    }; 
}); 

测试和工程巨大，但是，一些调整可能需要得到它只是你喜欢的方式。

Answer 2

你可能只是没有设置图像元素的宽度和高度属性，并写入下一个样式：

.hentry img { max-width: 100%; } 

它会收缩相对最小边。

P.S.但不在位置：绝对;块没有任何大小。将父块设置为相对定位。