html - Safari 中的图像缩放以实现流畅的设计

Question

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

对于图像，我使用 height:100% 和 Width:100%；在 Firefox 和 Internet Explorer 8 中一切正常，但在 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%;
}

Answer 1

如果您所说的“扭曲”是指像素化，那是浏览器不太擅长放大图像的情况。像您可能从 Photoshop 获得的良好缩放非常昂贵，并且一些浏览器实现更快(但不太平滑)的缩放以减少渲染时间。