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或tutorial中的插件吗？请帮我调整图片大小。

Answer 1

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

例如：

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

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

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

Answer 5

这个jQuery插件可以满足您的需求： http://buildinternet.com/project/supersized/

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

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

窗口调整大小时，图像会调整大小

5 个答案: