如何使用CSS/Javascript防止iOS上的图像在HTML上自动旋转

我正在创建一个照片网站-我上传了一张我自己的照片，实际上方向不正确（图像逆时针旋转了90度）。我从我的iPhone上传了这张图片，很明显，这张图片是故意以这种方式存储的

在我的网站上，HTML页面呈现了一个JSON对象，其中包含照片的URL以及图像维度。我正在使用jquerymobile，我在页面上添加了一个链接，当您单击照片时，它会将照片显示为一个弹出窗口。弹出窗口呈现一个

标记，其尺寸足够小，可以在当前视口宽度/高度范围内容纳图像。它使用我前面提到的JSON以及

$（window）.width（）和
$（window）.height（）的结果来计算维度

在桌面上-照片正确地显示在错误的方向上（因为这是照片实际存储的方式）

在iPad和iPhone上-照片是自动旋转的，因此照片的方向正确，但尺寸都是错误的，因此照片被拉伸和扭曲

我想知道以下几点：

这是iOS或其他设备上浏览器的常见功能吗
有没有办法使用CSS或Javascript禁用此功能
有没有办法检测到它的发生并更正
标记的尺寸？我不介意照片的方向被浏览器纠正了，我只是希望尺寸合适
编辑

使标题更像一个问题的形式——也使问题更直接

更多编辑

下面是一个JS提琴示例：

如果单击桌面计算机上的链接，弹出窗口将显示方向不正确的图像。如果单击iPhone或iPad上的链接，弹出窗口将显示正确定向的图像，但尺寸错误，因此照片会被拉伸

在实际场景中，JSON由PHP代码呈现，PHP代码可以读取图像，并使用
getimagesize（）
好的，我将尝试回答这个问题：

是的，这是故意的，iOS将显示方向存储在EXIF数据中（包括分辨率、快门、GPS等），但将图像数据保存在设备方向。

有关EXIF的更多信息，请参阅

据我所知没有

是的，您应该能够访问EXIF数据并确定方向和尺寸

3号需要更多的解释：

您可以使用类似的库从javascript（包括jQuery插件）访问EXIF数据。
方向标记定义为：
0x0112:“方向”
，并存储为数字

使用该信息，您可以确定方向：

Value | Orientation
------|----------------------
1     | horizontal (normal)
2     | flip horizontal
3     | rotate 180°*
4     | flip vertical
5     | transpose
6     | rotate 90°*
7     | transverse
8     | rotate 270°*
* rotation is counter clockwise

如果需要，您至少可以为
交换宽度/高度。
请注意，EXIF数据还包括宽度和高度，因此如果它们与您认为的不同，也可以帮助确定旋转问题。
使用桌面浏览器的媒体查询，并将图像的css设置为100%高度和自动宽度

@media (min-width: 900px)
{
 img {width:auto; height:100%;}
}

你甚至可以考虑使用这些变量，而不是为移动站点< /P> > P>计算它们。你不需要我们JavaScript来显式地设置负载的图像的高度/宽度。删除脚本中插入这些内联高度/宽度样式的部分，只需将以下内容添加到样式表中：
.ui-popup-container {
    width: calc(100% - 40px); /* simulates a 20px margin */
}

.ui-popup-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

这里有一个更新的
来规范我的评论-也许你可以回避这个问题：

如果不需要存储精确的原始图像，则可以在存储/检索图像时旋转数据

或者，正如OP在回应中指出的那样，只需删除EXIF标记，浏览器将无法再使用它来“修复”方向

（p.s.总是足够多的时间来找出您实际试图解决的问题：D）
您是否尝试过将图像的高度/宽度设置为自动以及最大高度/宽度？@monnes这可能是可以接受的-但请看一下小提琴-我希望弹出窗口显示在视口中居中的图像，照片要调整大小，这样无论你的屏幕有多大都可以看到（比如说，在iphone上真的很小）。看看我下面的回答，这就是你想要的还是我错过了什么？我很乐意在必要时进行更新。在我之前完成的照片存储代码中，我们使用了EXIF数据来更正照片方向，无论是在存储之前还是在返回时。您不想这样做有什么原因吗？@brichins也许我可以显式删除EXIF数据？如果客户坚持输出总是尊重照片的实际存储，对吗？在这一点上，我更希望输出根据您使用的浏览器而有所不同！在编写包含URL+维度的JSON对象的PHP服务器上，有没有办法做到这一点？请注意，图像存储在一个文件夹中，可以由PHP服务器读取-理想情况下，服务器可以以某种方式更正照片？如果您想尝试使用Javascript修复此问题，这里有一个JS提琴：这很有用-我想我可以使用PHP中的
exif\u read\u data
查找信息并更正照片。这很接近，但是弹出窗口太大了。X按钮向上太远，太右-X按钮应该在图像的右上角，整个弹出窗口应该有一个20px的边距。另外-我希望照片在桌面上有正确的方向。它看起来像是X按钮的问题，弹出窗口的高度问题只有在屏幕比它高的时候才会发生。因为加载图像需要一秒钟，显示弹出窗口时，尺寸未知，因此弹出窗口不会以视口为中心打开。（要体验这一点，请务必