如何防止图片应用transform:rotate(90deg)时alt文本被旋转？

这个问题的核心在于transform样式是直接作用在<img>整个元素上的，当图片加载失败时，替代文本（alt）作为元素的一部分自然会跟着旋转。下面给你两个实用的解决方案，适配页面有大量图片的场景：

方案一：通过JS给加载失败的图片移除旋转样式 #

这是最简单直接的方法，我们监听图片的error事件，当图片加载失败时给它添加专属类，再通过CSS重置旋转效果：

代码实现 #

CSS部分：

/* 默认给需要旋转的图片添加旋转效果 */
img.rotate-90 {
  transform: rotate(90deg);
}

/* 加载失败的图片移除旋转，让alt文本正常显示 */
img.rotate-90.img-error {
  transform: none;
}

/* 可选：给失败的alt文本加基础样式，避免和其他元素冲突 */
img.img-error {
  padding: 8px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

HTML部分：

<div>
  <img class="rotate-90" alt="User Name" src="http://ImageURL">
</div>

JS部分（批量处理所有带旋转类的图片）：

// 获取所有需要旋转的图片
const rotatedImgs = document.querySelectorAll('img.rotate-90');

rotatedImgs.forEach(img => {
  // 监听图片加载失败事件
  img.addEventListener('error', () => {
    img.classList.add('img-error');
  });
  
  // 处理页面刷新后已处于加载失败状态的图片
  if (!img.complete || img.naturalWidth === 0) {
    img.classList.add('img-error');
  }
});

方案二：用容器分离图片和替代文本 #

如果不想依赖JS，可以用CSS的:has()选择器（现代浏览器均支持），通过容器来分别控制图片和替代文本的显示逻辑：

代码实现 #

HTML部分：

<div class="img-rotate-container" data-alt="User Name">
  <img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL">
</div>

CSS部分：

.img-rotate-container {
  position: relative;
  /* 根据你的图片尺寸设置容器大小，或用自适应属性 */
  width: 100px;
  height: 150px;
}

.img-rotate-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片加载失败时隐藏图片 */
.img-rotate-container:has(img:error) img {
  display: none;
}

/* 加载失败时显示容器的替代文本，无旋转效果 */
.img-rotate-container:has(img:error)::after {
  content: attr(data-alt);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

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