Question

我的页面上只有很少的大图像，因此当我使用移动网络时，我想在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上的chrome上运行正常，但是在safari中查看时，没有调整大小。另一个奇怪的事情是我尝试提醒图像大小，但不断收到“零”警报。

Answer 1

您必须调用该功能

    <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>

Answer 2

您应该等到图像加载，例如：

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

获取和设置图像大小无法在Safari中工作

2 个答案: