图像调整大小作为窗口调整大小

Question

我在我的HTML DOM中有一些图像。图像是

<div id="page"> 
    <div class="image-gallery"> 
     <img src="images/imagewords.jpeg" alt="sec"> 
     <img src="images/images.jpeg" alt="thi"> 
     <img src="images/imagedss.jpeg" alt="fou"> 
     <img src="images/imrtages.jpeg" alt="fiv"> 
     <img src="images/nasa-images.jpeg" alt="six"> 
     <img src="images/pre-raphaelite-galleries-vi.jpg" alt="sev"> 
     <img src="images/websitfe-design.jpg" alt="nin"> 
    </div> 
    </div><!-- #page--> 

现在我想要调整窗口大小时调整所有的图像。 jQuery中有jQuery插件或教程吗？请帮我调整图像大小。

Answer 1

这个jQuery插件你想要做什么： http://buildinternet.com/project/supersized/

Alternativly你可以用这个代码访问窗口大小：

var windowHeight = $(window).height(), 
    windowWidth = $(window).width(); 

Answer 2

调整他们怎么样？到一个固定的大小？到窗口宽度的百分比？对容器的百分比？通常，您不需要JS，只需将宽度定义为百分比即可。

例如：

.image-gallery { 
    width: 100%; 
} 
    .image-gallery img { 
     width: 20%; /* or whatever width you want here. */ 
    } 

Answer 3

CSS：

img{max-width: 100%; 
    height: auto; 
    width: auto; 
} 

检查： 来源：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 4

尝试这样的：

CSS

.image-gallery{width:50%;} 
.image-gallery img{width:100%;} 

HTML

<div id="page"> 
    <div class="image-gallery"> 
     <img src="images/imagewords.jpeg" alt="sec"> 
     <img src="images/images.jpeg" alt="thi"> 
     <img src="images/imagedss.jpeg" alt="fou"> 
     <img src="images/imrtages.jpeg" alt="fiv"> 
     <img src="images/nasa-images.jpeg" alt="six"> 
     <img src="images/pre-raphaelite-galleries-vi.jpg" alt="sev"> 
     <img src="images/websitfe-design.jpg" alt="nin"> 
    </div> 
    </div><!-- #page--> 

Answer 5

$(window).resize(function() { 
    var h = parseInt($(window).height(), 10); 
    var w = parseInt($(window).width(), 10); 
    $("img").css({ 
     'width': w, 
     'height': h 
    }); 
});