iPad Safari 在将 jpg 渲染为背景图像时遇到问题？

Posted 2023-03-12

【中文标题】iPad Safari 在将 jpg 渲染为背景图像时遇到问题？

【英文标题】：iPad's Safari have problems on rendering jpg as background-image?

【发布时间】：2012-09-11 08:07:59

【问题描述】：

这是我的代码：

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有什么限制吗？

只是注意到，如果我使用低于 1150 像素（作为高度）的 .jpg，它也可以正常工作。 Safari 的错误？

【参考方案1】：

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

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

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

【讨论】：

超过 2MP？这还没有超过 2MP！那个 jpeg 是 389,37kB。事实上，以 30% 的质量保存 jpeg 1900x1200 我遇到了同样的问题......所以这是一个维度的痛苦！设置 :cover 似乎有效。希望它不会伤害 IE :)

@markzzz：389.37KB file 大小无关紧要，因为 image 大小超过 2MP：1900px * 1200px = 2280000px = 2.28MP跨度>

我还注意到，如果我调整浏览器的大小，背景大小会“改变”图像的大小。该死的……

@markzzz：这是那些特定值的期望行为（出于某种原因，我假设你在他们之后ಠ_ಠ）。您应该忽略它们，而是查看mdn docos on image resizing

嗯！不！我想要的是图像在浏览器中居中，而不是调整大小。所以我认为我必须避免背景大小。还有其他解决方案吗？