我有两张不同尺寸的图像,一张适用于小于 759px 的屏幕,另一张适用于大于 759px 的屏幕。
我已经设法在文档加载时根据窗口宽度更改图像的来源。但我真的希望能够在调整浏览器大小时执行此操作,但在我的一生中,我无法让它执行此操作,它似乎只在页面最初加载时才起作用。
这是我的代码:
$(document).ready(function() {
function imageresize() {
var contentwidth = $(window).width();
if ((contentwidth) < '700'){
$('.fluidimage').each(function(){
var thisImg = $(this);
var newSrc = thisImg.attr('src').replace('x2', 'x1');
thisImg.attr('src', newSrc);
});
} else {
$('.fluidimage').each(function(){
var thisImg = $(this);
var newSrc = thisImg.attr('src').replace('x1', 'x2');
thisImg.attr('src', newSrc);
});
}
}
imageresize();//Triggers when document first loads
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
});
尝试使用 css3 媒体查询,而不是使用 jQuery 或 javascript。
http://css-tricks.com/media-queries-sass-3-2-and-codekit/
考虑在 .每当屏幕大小调整为黑白 600 像素至 900 像素时; x2.jpg 将被加载。默认情况下将使用 x1.jpg。
Ex:
.img-src {
background-image: url("http://imageurlhere.com/x1.jpg");
}
@media (min-device-width:600px) and (max-width:900px) {
.img-src {
background-image: url("http://imageurlhere.com/x2.jpg");
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)