根据视口宽度动态调整图像高度

Question

如何使用 jQuery 使用视口的宽度动态更改图像的高度。

举个例子

当网站宽度为 450 像素时，我想将图像宽度从 300 更改为 100。

我也在使用 timthumb 来调整我的图片大小。

HTML 代码

<img src="timthumb.php?src=myimage.jpg&amp;h=300&amp;w=750&amp;q=100" class="MyImages">

我如何使用 jQuery 来做到这一点？

Answer 1

这应该可以。只需在 jQuery 获取视口宽度后添加 src-attribute 并在窗口调整大小时更新它。

<img id="img1" src="" class="MyImages">
<script type="text/javascript">
$(function() {
  update_image();
  $( window ).resize(function() {
    update_image();
  });
});
function update_image(){
  var width = $( window ).width();
  if(width<450) { var picwidth=100; } else { var picwidth=300; }
  $('#img1').attr('src','timthumb.php?src=myimage.jpg&h=300w='+picwidth+'&q=100');
}
</script> 

回答您的问题： 编辑您的图像，使其如下所示：

<img src="" class="MyImages" data-src="myimage.jpg">

现在您可以使用 jQuery 获得正确的尺寸：

<script type="text/javascript">
$(function() {
  $('img').each(function(){
    update_image(this);
  });
  $( window ).resize(function() {
    $('img').each(function(){
      update_image(this);
    });
  });
});
function update_image(e){
  var width = $( window ).width();
  if(width<450) { var picheight=100; } else { var picheight=300; }
  var image = $(e).attr('data-src');
  $(e).attr('src','timthumb.php?src='+image+'&h='+picheight+'&q=100');
}
</script> 

这样，当您调整视口大小时，您的所有图像都会更新。

Answer 2

如果您不兼容基于 CSS2 的旧浏览器（如 IE7），您可以编写 CSS3 媒体查询。

例如：

@media (max-width: 450px) {
    .MyImages{width:100px;}
}

如果你想要纯 javascript / 基于 jQuery 的解决方案：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

$(function(){
   if(viewport().width<=450){
     $(".MyImages").css("width":"100px");
   }
});

如果你想确保它在浏览器调整大小时也能正常工作：

$(window).on("resize",function(){
   if(viewport().width<=450){
     $(".MyImages").css("width":"100px");
   }
});

注意：JavaScript 方式比 CSS3 解决方案更昂贵 浏览器。

Answer 3

你不需要 jQuery。只需将图像的宽度和高度属性设置为您想要的值：

 <img src="myimage.jpg" id="varimage" width="100" height="200">

 ....


 var img = getElementById("varimage");
 img.height = 400;
 img.width = 200;

和 jQuery（这就是你所要求的）：

 $("#varimage").width(400);
 $("#varimage").height(200);