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

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

例如

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

我还使用timthumb调整图像大小

HTML代码

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

---

如何使用jQuery来实现这一点

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

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

 ....


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

---

这应该行得通。只需在jQuery获得视口宽度后添加src属性，并在调整窗口大小时更新它

<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> 

$（函数（）{
更新_image（）；
$（窗口）。调整大小（函数（）{
更新_image（）；
});
});
函数更新_image（）{
变量宽度=$（窗口）.width（）；
if（width如果不兼容基于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");
   }
});

函数视口（）{
var e=窗口，a=内部；
如果（！（'innerWidth'在窗口中））{
a=‘客户’；
e=document.documentElement | | document.body；
}
返回{width:e[a+'width']，height:e[a+'height']}；
}
$（函数（）{
if（viewport（）.width这可能会对您有所帮助。使用它会有帮助，并且比使用jquery更简单。是的@NicoMartin是正确的，这不适用于timthumb是否有可能我只能更改图像的高度而不是更改整个timthumb代码。因为我有多个图像要更改高度（使用php循环）。我确实尝试过，但没有运气再检查一点。问题是什么？你有链接吗？它可以工作，谢谢。我刚刚将
$（'img'）
更改为
$（'MyImages'）
，因为我不想更改所有图像高度+1来指出css解决方案，这应该被视为此类问题的默认解决方案（虽然它仍然让浏览器调整图像大小，但这并不完美）。
<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> 

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

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");
   }
});