jquery - 图像大小随着窗口大小调整

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

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

Answer 2

CSS：

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

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

Answer 3

试试看：

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 4

如何调整它们的大小？到固定大小？到窗口宽度的百分比？到容器的百分比？通常，您不需要 JS，只需将宽度定义为百分比即可。

例如：

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

Answer 5

这个 jQuery 插件做你想做的事：http: //buildinternet.com/project/supersized/

或者，您可以使用以下代码访问窗口大小：

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