javascript - 根据窗口宽度更改图像 - 响应式布局 CSS？查询？ Ajax ？

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