调整图像大小,同时在Windows 8 Metro HTML5应用程序中保持其质量
Resizing Image while keeping its quality in Windows 8 Metro HTML5 apps?
当我将图像拉伸到分割的大小时,图像的质量已经下降。是否可以在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%
}
假设您在"缩小图像大小"时遇到问题,那么这是因为IE10的插值模式只支持低质量(最近的邻居),因此调整大小的图像看起来比原始图像质量更低。
在IE7到IE9中,您可以使用CSS属性-ms插值模式
-ms-interpolation-mode: bicubic;
但这在IE10中不再受支持(见图)。
不幸的是,没有一个简单的解决方案。有一些CPU密集型的解决方案,但如果可以的话,最好以实际需要的大小存储图像。还请确保您通过提供更大的图像变化(大小的180%和140%)来支持高DPI系统。
为了防止图像质量下降,请使用您想要显示的最高分辨率的图像。如果图像是360x480,并且您想要以高于此分辨率(例如720x960)的分辨率显示,则质量会降低。唯一的解决办法是使用分辨率为720x960的图像。
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 下载HTML5/Javascript MOBILE应用程序中的PDF文件
- 使用Javascript和html5登录Windows应用程序的Facebook
- HTML5应用程序数据库同步
- 独立离线的html5网络应用程序
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- 将文本工具添加到绘制应用程序HTML5画布
- 在NW.js应用程序中为HTML5文件API设置配额
- 如何使用一个代码库在线和离线访问 HTML5/JS 应用程序中的数据库
- Windows 8 HTML5 JavaScript 应用程序中向左滑动的事件名称是什么
- 客户端将EDN转换为JSON(HTML5应用程序使用的Datomic数据)
- 通过javascript清除并更新html5应用程序缓存
- html5/JS中的java桌面应用程序gui
- 我的html5应用程序无法显示模型
- 如何禁用安卓后退按钮点击在html5网络应用程序
- HTML5移动Web应用程序
- 调整图像大小,同时在Windows 8 Metro HTML5应用程序中保持其质量
- HTML5&CSS3 Web应用程序
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 安卓应用程序-html5+cocoonjs不起作用