Html Safari流体设计中的图像缩放

我正在尝试制作一个流畅的网站，你可以在不同大小的显示器上看到网站的全屏

对于图像，我使用

高度：100%

和

宽度：100%

；Firefox和InternetExplorer8看起来一切正常，但在Safari和Google Chrome中，图像会失真。为什么会发生这种情况

<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%;
}

........
#主接线盒{
宽度：100%；
最大宽度：100%；
身高：100%；
最大高度：100%；
}

如果你说的“扭曲”是指像素化，那就是浏览器不善于放大图像。从Photoshop中获得的良好缩放效果非常昂贵，一些浏览器实现了更快（但不太平滑）的缩放以缩短渲染时间