0

次のように、html を使用して画像の幅を定義するアプリケーションがあります。

                                                                   ↓↓↓↓↓↓↓↓↓↓↓↓
<img id="teste" class="item" src="../img/fotos/4medium.jpg" style="width: 430px; display: block; margin-top: -7px; margin-left: 0px; max-width: 9999em; height: auto;"/>`

ただし、画像の幅が 430px 未満の場合、アプリは画像を拡大して、画像をゆがめたりピクセル化したりする可能性があります。

style="width"が元の画像の幅よりも大きいかどうかを確認し、そうであれば、src を別の画像に変更する方法はありますか?

私はそれが次のように見えるべきだと思います：

if ($('#teste').width() > $(4medium.jpg).width()) {
$('img').attr('src', '../img/fotos/4larger.jpg');
} else {
$('img').attr('src', '../img/fotos/4medium.jpg');
}

前もって感謝します。

4

2 に答える 2

2

理想的には、これはサーバー上のスクリプトで確認するものです (そうしないと、両方のイメージをクライアントにダウンロードする必要がある可能性があるため)。このようなものが動作するはずです:

var testImg = new Image();
testImg.src = '../img/fotos/4medium.jpg';
testImg.onLoad = check_image_size( testImg );

次に、幅をテストして、より大きな画像をロードする必要があるかどうかを確認します。

function check_image_size( obj ) {
  var url = obj.src;
  if ( obj.width > 430 )
     url = '../img/fotos/4larger.jpg';
  $('#teste').attr( 'src', url );
}

これは醜いアプローチです (両方の画像をロードする可能性があるため遅くなる可能性があります) が、クライアント側でこれを行うためのよりエレガントな方法があるかどうかはわかりません。

于 2013-06-30T02:26:11.347 に答える
0

試す：

var teste_img = document.getElementById('teste'); 
var teste_width = teste_img.clientWidth;
var medium_img = document.getElementById('medium'); 
var medium_width = teste_img.clientWidth;


if(test_width > medium_width ){
    $('img').attr('src', '../img/fotos/4larger.jpg');
}else{
    $('img').attr('src', '../img/fotos/4medium.jpg');
}
于 2013-06-30T01:43:58.510 に答える