如何使用 CSS/Javascript 在 HTML 上防止在 iOS 上自动旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21201548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent auto-rotating images on iOS on HTML with CSS/Javascript
提问by codefactor
I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.
我正在创建一个照片网站 - 我上传了一张自己的照片，但实际上方向不正确（图像逆时针旋转了 90 度）。我已经从我的 iPhone 上传了这张图片，这显然是故意以这种方式存储的。
On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img>tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width()and $(window).height().
在我的网站上，HTML 页面呈现了一个 JSON 对象，其中包含照片的 URL 以及图像尺寸。我正在使用 jQuery mobile - 在页面加载时我在页面上放了一个链接，当您单击照片时，它会将照片显示为弹出窗口。弹出窗口渲染一个<img>标签，其尺寸足够小以适合当前视口宽度/高度内的图像。它使用我之前提到的 JSON 计算维度，以及来自$(window).width()和的结果$(window).height()。
On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).
在桌面上 - 照片以错误的方向正确显示（因为这是照片的实际存储方式）。
On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.
在 iPad 和 iPhone 上 - 照片会自动旋转，因此照片方向正确，但尺寸全部错误，因此照片都被拉伸和扭曲。
I would like to know the following:
我想知道以下内容：
- Is this a commonly known feature of browsers on iOS or other devices?
- Is there a way to disable this functionality using CSS or Javascript?
- Is there a way to detect that it happened and correct the dimensions of the
<img>tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.
- 这是 iOS 或其他设备上浏览器的一个众所周知的功能吗？
- 有没有办法使用 CSS 或 Javascript 禁用此功能？
- 有没有办法检测它发生并更正
<img>标签的尺寸？我不介意浏览器更正了照片的方向，我只希望尺寸正确。
EDITS
编辑
Making the Title more in the form of a question - Also reformulating the question to be more direct
使标题更多地采用问题的形式 - 同时将问题重新表述为更直接
MORE EDITS
更多编辑
Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/
这是一个带有示例的 JS Fiddle：http: //jsfiddle.net/5JKgn/
If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.
如果您单击台式计算机上的链接，则弹出窗口会显示方向不正确的图像。如果您在 iPhone 或 iPad 上单击链接，弹出窗口会显示正确定向的图像，但尺寸错误，因此照片会被拉伸。
In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()
在实际场景中，JSON 由 PHP 代码呈现，该代码可以读取图像并从它使用的内容中输出宽度高度 getimagesize()
采纳答案by brichins
To formalize my comments - perhaps you can just sidestep the issue:
正式化我的评论——也许你可以回避这个问题：
If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.
Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.
如果您不需要存储精确的原件，您可以在存储/检索图像时旋转数据。
或者，正如 OP 在回应中指出的那样，只需删除 EXIF 标签，浏览器将不再能够使用它来“修复”方向。
(p.s. Always remember to ask 'why'enough times to figure out what problem you're actually trying to solve :D)
（ps 永远记得问“为什么”足够多的时间来弄清楚你真正想要解决的问题：D）
回答by Shirkrin
OK I'll try to answer this one:
好的，我会尝试回答这个问题：
Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
For more info on EXIF see Wikipedia.Not that I know of.
Yes, you should be able to access the EXIF data and determine orientation and dimensions.
是的，iOS 故意将显示方向存储在 EXIF 数据中（包括分辨率、快门、GPS 等），但将图像数据保存在设备方向中。
有关 EXIF 的更多信息，请参阅维基百科。从来没听说过。
是的，您应该能够访问 EXIF 数据并确定方向和尺寸。
Nr. 3 needs a little more explanation:
编号 3 需要多一点解释：
You could use a library like this oneto access the EXIF data from javascript (includes jQuery plugin).
The Orientation Tag is defined as: 0x0112 : "Orientation"and stored as a number.
你可以使用库像这样一个从JavaScript访问EXIF数据（包括jQuery插件）。方向标签定义为：0x0112 : "Orientation"并存储为数字。
Using that information you can determine the orientation:
使用该信息，您可以确定方向：
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
That should enable you to at least swap width / height for your <img>if need.
Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.
这应该使您至少可以<img>根据需要交换宽度/高度。请注意，EXIF 数据还包括宽度和高度，因此如果它们与您认为的不同，这也有助于识别旋转问题。
回答by monners
You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:
您不需要我们使用 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%;
}
Here's an updated Fiddle
这是更新的小提琴
回答by rootsup
Use media queries for desktop browsers and set the css for the images to 100% height and auto width.
对桌面浏览器使用媒体查询，并将图像的 css 设置为 100% 高度和自动宽度。
@media (min-width: 900px)
{
img {width:auto; height:100%;}
}
You may even consider using these variables instead of calculating them for the mobile site
您甚至可以考虑使用这些变量而不是为移动站点计算它们
