iPhone 图片旋转90度

为什么需要旋转 iPhone 图片？

iPhone 拍照时会根据设备方向写入 EXIF 信息（如 Orientation 标签），但部分浏览器或系统不会自动处理该信息， 导致图片显示为横置或倒置。通过前端技术，我们可以手动将图片旋转 90 度以正确显示。

效果演示

以下展示一张模拟 iPhone 横屏拍摄的图片及其旋转 90 度后的效果：

原始方向

旋转 90° 后

使用 CSS 实现旋转

最简单的方式是使用 CSS 的 transform: rotate(90deg) 属性：

.rotated { transform: rotate(90deg); }

注意：旋转后可能需要调整容器布局，避免图片溢出。

使用 JavaScript 动态处理

你也可以通过 JavaScript 动态为图片添加旋转效果：