根据窗口宽度更改图像-响应式布局CSS？jQuery的？阿贾克斯？

Question

嗨，我正在尝试随着窗口宽度的变化来更改图像，而不刷新页面。

$(document).ready(function(){

    if($(window).width() <= 600) {
        $('#img').attr('src','images/image.png');
        $('#img').css({"width": "50px"});
    };
});

这是我编写的Jquery代码，但仅在刷新页面时有效。当窗口的宽度达到600px时，如何更改图像？我不确定是否应该使用css，ajax或jquery。谢谢

Answer 1

这将工作..

function adjustImage(){
if($(window).width() <= 600) {
        $('#img').attr('src','images/image.png');
        $('#img').css({"width": "50px"});
    };
}
$(document).ready(function(){

    adjustImage();
});

$( window ).resize(function() {
  adjustImage();
});

但是我们也可以使用CSS如下。

@media screen and (max-width: 600px) {
 #img{
   width:50px;
  }
}