0

ページに大きな画像がほとんどないため、モバイル Web を使用する場合、たとえば iPhone で表示するときにサイズを変更したいと考えています。

したがって、次のようなコードを作成しました

<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />
<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />
<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />

<script type="text/javascript">
$(function(){
    var w=$(window).width();

    $("img").each(function(){
        alert($(this).width());//shows 'zero'

        if($(this).width()>w){
            var nw=w-60;
            alert(nw);
            $(this).css('width',nw+"px");
            $(this).css('height','auto');
        }
    });
});
</script>

コードはiPhoneのクロムで正常に動作していますが、サファリで表示するとサイズ変更は行われません。もう1つの奇妙なことは、画像サイズを警告しようとしましたが、「ゼロ」の警告を受け続けていることです。

4

2 に答える 2

0

次のように、イメージがロードされるまで待つ必要があります。

$("img").each(function(){
    $(this).load(function() {
        if($(this).width()>w){
            var nw=w-60;
            $(this).css('width',nw+"px");
            $(this).css('height','auto');
        }
    });
});
于 2013-07-25T09:45:48.983 に答える
0

関数を呼び出す必要があります

    <script src='jquery.js'></script>
    <script type="text/javascript">
          $(document).ready(function(){
              var w=$(window).width();

              $("img").each(function(){
                  alert($(this).width());//shows 'zero'

                  if($(this).width()>w){
                      var nw=w-60;
                      alert(nw);
                      $(this).css('width',nw+"px");
                      $(this).css('height','auto');
                  }
              });
           });

        </script>
于 2013-07-24T20:20:34.430 に答える