javascript - 在 Windows 8 Metro HTML5 应用程序中调整图像大小同时保持其质量？

Question

当我将图像拉伸(stretch)到分区的大小时，图像的质量下降了。在 Windows 8 Metro HTML5 应用程序中是否可以在保持图像质量的同时调整图像大小？图片尺寸为 360x480 像素。

HTML5代码:

     <div id="imageSection" >
        <input type="image" id="homepageimage" >
    </div> 

css文件代码:

    #imageSection { 
     height: 90%;   
       }
 #homepageimage { 
width: 100%;   
background-image: url(../images/kidsphoto.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
height:100%

Answer 1

假设您在“缩小”图像时遇到问题，那是因为 IE10 的插值模式仅支持低质量(最近邻)，因此调整后的图像看起来质量低于原始图像。

在 IE7 到 IE9 中，您可以使用 CSS 属性 -ms-interpolation-mode

-ms-interpolation-mode: bicubic;

但是IE10不再支持(去图)。

不幸的是，没有一个简单的解决办法。有一些CPU intensive workarounds但如果可以的话，最好以您实际需要的尺寸存储图像。还要确保 you support high DPI systems通过提供更大的图像变化(大小的 180% 和 140%)。