包裹在div中的可调整大小/流体图像？

即时尝试获取一些图像来调整窗口大小时自动调整大小。包裹在div中的可调整大小/流体图像？

我有这个与下面的代码工作，但是我想有一个更多的图像控制，如能够设置最小高度，任何想法？

也可能将图像包装在一个div中，所以有更多的控制权？我不是好与JS所以任何帮助或解释将有助于

$(function() { 
    var $img = $(".l"); 
    var ratio; 
    var offsetX = $img.offset().left; 
    var offsetY = $img.offset().top; 

    $(window).load(function() { 
     ratio = $img.width()/$img.height(); 
     $(this).resize(); 
    }); 

    $(window).resize(function() { 
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth; 
     var viewportHeight = window.innerHeight || document.documentElement.clientHeight; 
     var availWidth = viewportWidth - offsetX - 70; 
     var availHeight = viewportHeight - offsetY - 70; 

     if (availWidth/availHeight > ratio) { 
      $img.height(availHeight); 
      $img.width(availHeight * ratio); 
     } 
     else { 
      $img.width(availWidth); 
      $img.height(availWidth/ratio); 
     } 
    }); 
});

来源

2012-05-02 user554114

是的，我有一个CSS版本，没有使用任何的js工作，但很好奇如何做到这一点与JS工作。 – user554114

只需使用CSS：

img { width: 100%; }

您可以再申请height或min-height，因为你需要。

要看到它的工作，调整本小提琴的窗口：

Example fiddle

来源

2012-05-02 12:08:31

包裹在div中的可调整大小/流体图像？

回答

相关问题