3

当我显示宽度为 1600 像素的图像时，它会正确显示。但是当我显示一个宽度为 1920 像素的图像时，Safari 显示的图像要小得多。

我用：

<!-- in the header -->
<meta name="viewport" content="width=device-width;" />

<!-- correct -->
<img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">

<!-- to small -->
<img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">

我该如何解决这个问题，而不在元标记中设置整体宽度？

这发生在装有 iOS 5.1 的 iPhone 和 iPad 上

编辑： 即使使用这个最简单的 html 页面：

<!DOCTYPE html>
<html lang="de">

<head>

    <meta charset="UTF-8" />

    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <title></title>

</head>

<body>

    <img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">
    <img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">


</body>
</html>

我得到这个结果：

在此处输入图像描述

4

1 回答 1

5

一种方法可能是将图像宽度设置为“100%”，将高度设置为“自动”。这样，所有图像，无论其像素宽度如何，都将显示为其父容器的完整宽度。这实际上也是支持 Retina 的巧妙技巧。

编辑：好的，现在我明白你在说什么了。您希望用户看到全尺寸的 1600 或 1920 图像，并且您不希望 iOS 对其进行缩放。

编辑＃2：所以我尝试了一些不同的事情 - 你是对的。当图像大小高于某个 px 值时，iOS 似乎正在“缩放”没有明确设置宽度或高度的图像。当您明确设置它们时，它们会按预期工作。这似乎是您目前唯一的解决方案。

<img src="image_1600.jpg" alt="" style="width: 1600px; height: auto" />
<img src="image_1920.jpg" alt="" style="width: 1920px; height: auto" />
于 2012-06-27T13:37:45.203 回答