如何在CSS/HTML中旋转图片？网站iPhone照片显示倒置求助

嘿，这个问题我之前碰到好多次了——iPhone拍摄的照片会自带EXIF方向元数据，本地的看图软件（比如系统相册、Photoshop）会自动读取这个信息并纠正显示方向，但很多网站的图片渲染逻辑没做这个处理，就会出现明明本地正常，网站上却倒置的情况。给你几个靠谱的解决办法：

1. 前端JS动态纠正（不用改图片） #

如果不想动原始图片，可以用JavaScript读取照片的EXIF信息，然后通过CSS调整显示方向。这里可以用专门的EXIF处理库来简化操作：

• 先引入EXIF处理库
• 给图片绑定加载事件，读取Orientation标签值，然后根据值设置transform：

// 示例代码，假设你的图库图片都带.gallery类
const galleryImgs = document.querySelectorAll('.gallery img');

galleryImgs.forEach(img => {
  img.onload = function() {
    EXIF.getData(this, function() {
      const orientation = EXIF.getTag(this, 'Orientation');
      let transformStyle = '';
      switch(orientation) {
        case 3: // 照片需要180度旋转
          transformStyle = 'rotate(180deg)';
          break;
        case 6: // 照片需要顺时针转90度
          transformStyle = 'rotate(90deg)';
          this.style.transformOrigin = 'top left';
          this.style.width = `${this.height}px`; // 旋转后调整宽高避免溢出
          break;
        case 8: // 照片需要逆时针转90度
          transformStyle = 'rotate(-90deg)';
          this.style.transformOrigin = 'bottom left';
          this.style.width = `${this.height}px`;
          break;
      }
      this.style.transform = transformStyle;
    });
  };
});

这个方法的好处是不用修改图片文件，但要注意旧浏览器的兼容性。

2. 预处理图片（最稳妥的方案） #

直接修改原始图片，把EXIF方向信息应用到图片像素上，之后无论在哪显示都不会有问题：

• 图形工具手动处理：用Photoshop、GIMP，甚至Windows画图、Mac预览打开图片，旋转到正确方向后重新保存（保存时要确保覆盖原文件，或者导出时更新EXIF信息）
• 命令行批量处理：如果有很多图片，用ImageMagick工具批量处理效率更高：

# 处理单张图片
convert your-photo.jpg -auto-orient fixed-photo.jpg

# 批量处理当前目录下所有JPG图片
for img in *.jpg; do convert "$img" -auto-orient "$img"; done

-auto-orient参数会自动读取EXIF方向，旋转图片到正确位置，同时移除原来的Orientation标签，彻底解决问题。

3. 服务器端自动处理（适合动态网站） #

如果你的网站是动态生成的（比如用PHP、Node.js搭建），可以在图片上传或者请求时自动处理：

• PHP可以用Imagick扩展，读取EXIF方向并旋转图片
• Node.js可以用jimp库，实现类似的自动纠正逻辑
  这样用户上传的照片会被自动处理，后续就不会出现显示问题了

个人最推荐第二种方案，预处理图片一劳永逸，不会有前端兼容性或者服务器配置的问题。

内容的提问来源于stack exchange，提问作者fechy