Question

我有一些高分辨率的图像，并且必须将其重新调整为更小并在网页上设置动画。我不想在图像编辑器上重新调整它，因为我希望在宽显示器上具有高分辨率。我已经尝试了几种方法来重新调整图像大小，但Firefox仍存在性能问题。虽然重新调整大小的图像是动画的，但CPU上升到90％，内存占用500mb。以下方法无助于提高性能，重新调整图像大小的常用最佳方法是什么？

<img id='picture' src='picture.png'>
#picture{width:50px;height:50px}

或者

<div id='picture'></div>
#picture{display:block;width:50px;height:50px;background:url('picture.png');background-size:100%}

或者

<div id='picture'></div>
#picture{display:block;background:url('picture.png');background-size:100%;-moz-transform:scale(0.5);}

Answer 1

所以试试这个（这是我测试并给出答案的例子）

HTML  


<button id="go1">» Animate Block1</button>
  <div id="block1"></div>

CSS

div { 
    background-image:url(Desert.jpg); 
    width:542px;
    height:351px;
    border:2px solid green;
  }

SCRIPT

$(document).ready(function(){
    $("#go1").click(function(){
      $("#block1").animate( { width:"1004px" }, { queue:false, duration:3000 } )
         .animate( { height:"687px" }, { queue:false, duration:3000 } )   
    });
  });

也使用“jquery-latest.js”插件只有一个问题是调整大小（）一个图像，但没有完全。！我试着解决它！

Answer 2

我认为这里最好的选择就是做你已经做过的事情：

HTML

<div class="huge_image">
</div>

CSS

.huge_image {
  width: 500px;
  height: 300px;
  background: url("/images/massive_image.jpg");
  background-size: 500px 300px;
}

如果表现真的那么糟糕，你可以使用为没有视网膜显示的人创建一个半尺寸的版本，只为具有视网膜功能的客户提供完整版本。查看retina.js以获得一种简单的方法。

我该如何在网页上重新调整图片大小？

2 个答案:

HTML

CSS