图片在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中获得的良好缩放比例是相当昂贵的，而且一些浏览器实现更快（但不太平滑）的缩放以减少渲染时间。