Safari中的图像缩放用于流体设计

Question

我正在尝试制作一个流畅的网站，您可以在不同尺寸的显示器上全屏显示网站

对于图片，我正在使用height:100%和Width:100%;在Firefox和Internet Explorer 8中，一切看起来都不错，但在Safari和谷歌浏览器中，图像会失真。为什么会这样？

<div id="main_wrapper">
    <img id="main_bg" src="images/main-bg.jpg" />

    <div id="main_content">

       ........
    </div>
</div>

#main_bg {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

Answer 1

如果“扭曲”是指像素化，那么浏览器就不能很好地扩展图像。像Photoshop可能获得的良好缩放非常昂贵，而且有些浏览器实现了更快（但不太流畅）的缩放，以缩短渲染时间。