2 つの異なるサイズの画像があります。1 つは 759 ピクセルより小さい画面用で、もう 1 つは 759 ピクセルより大きい画面用です。
ウィンドウの幅に応じてドキュメントが読み込まれるときに、画像のソースを変更することができました。しかし、ブラウザのサイズも変更されたときにこれを実行できるようにしたいのですが、私の人生ではそれを行うことができません。ページが最初にロードされたときにのみ機能するようです。
これは私のコードです:
$(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();
});
});