iPad的Safari在将jpg渲染为背景图像方面存在问题？

Question

这是我的代码：

HTML

<div class="sfondo-interne-8601">
    <div style="height:1200px; width:900px;">
        Test
    </div>
</div>

CSS

.sfondo-interne-8601
{
    background-image:url('http://www.deviantart.com/download/247331565/moonlit_tears_by_lifesequencebreak-d439699.png') !important;   
    background-repeat:no-repeat;
    background-position:center top;
} 

好吧，尝试在iPad上创建一个测试页面：它运行良好（图像是png）。

现在，尝试使用jpg更改图像（我已经为您选择了一个here）。您会注意到新图像将被调整大小（不确定哪些规则）并且以整个html文档的中心/顶部为中心。

为什么呢？我该如何解决？对ipad有任何限制吗？

我注意到如果我使用的.jpg比1150px（高度）慢，那么它也能正常工作。 Safari的错误？

Answer 1

在iOS上，jpeg images of over 2MP get subsampled（查看“资源限制”下），有效地改变图像的尺寸。

我推测，如果将background-size设置为contain或cover，这种情况就不会明显显现（它仍会发生，但由于纵横比不会受到影响，因此仍然会运行背景大小算法）

如果您希望子采样背景图像保持原始尺寸的渲染，您可以添加background-size: 1920px 1200px：before和after。