您好,我正在尝试在不刷新页面的情况下随着窗口宽度的变化而更改图像。
$(document).ready(function(){
if($(window).width() <= 600) {
$('#img').attr('src','images/image.png');
$('#img').css({"width": "50px"});
};
});
这是我编写的 Jquery 代码,但它仅在我刷新页面时有效。当窗口宽度达到 600px 时,如何响应地更改图像? 我不确定我是否应该使用 css、ajax 或 jquery。谢谢
最佳答案
这会起作用..
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;
}
}
关于javascript - 根据窗口宽度更改图像 - 响应式布局 CSS?查询? Ajax ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40967651/