【发布时间】：2016-03-15 18:15:15
【问题描述】：
我遇到了旋转图像的问题。 问题出现在 iPhone 的 Safari 浏览器中。
您会看到（严重）红色圆圈的图像。在 iPhone 上，它无缘无故地旋转了 90 度。上面的图片在两个浏览器上都能正确显示，并且 HTML 和 CSS 完全相同。
我正在使用引导 css 框架，这就是图像的显示方式：
<div class="col-lg-12" style="text-align: center; margin: 20px; background-color: rgba(255, 255, 255, 0); padding: 30px; border-radius: 20px;">
<div class="col-md-3">
<img class="img-circle" src="../admin/uploads/categories/<?php echo $categoryRow["img"]; ?>" width="140px" height="140px">
</div>
<div class="col-md-9">
<h2><?php echo $categoryRow['name']; ?></h2>
<p><?php echo $categoryRow['description']; ?></p>
<p><a class="btn btn-default" href="category.php?id=<?php echo $categoryRow['catID']; ?>" role="button">Mehr <?php echo $categoryRow['name']; ?></a></p>
</div>
在此页面上，不同文章的类别将显示为带有图片（带有问题）以及标题和说明。这发生在由 PHP 完成的 while() 中。
问题是我想知道为什么图像在 iPhone 上旋转，这不应该。该网站在 Android 浏览器和台式电脑上完美运行。就在 iOS 和 Safari 上，这个神秘的东西出现了。 我真的希望你能帮助我解决这个问题。
星期天快乐，并在期待中感谢您:)
【问题讨论】：
-
图像是如何创建的，它是什么类型的？一些图像嵌入了方向信息，这可能是 iOS 尊重方向设置而其他设备没有。
-
哇，非常有趣。我现在在我的 chrome 浏览器中打开了图片，实际上它就像它在 iPhone 上的显示方式一样。但现在的问题是，为什么 Google chrome 和除 iPhone 之外的所有其他浏览器都以正确的方式显示它，即使图像不是正确的方式？
-
不是很多图像显示引擎关注方向信息。对于那些不这样做的人，图像以像素数据的方向显示。对于 iOS 和 Chrome 浏览器，它会查看方向元数据并在显示之前旋转图像。这解决了将您的数码单反相机中的肖像图像发布到网络上并让它们横向显示的问题。
标签： html ios css image twitter-bootstrap