CSS content属性控制img元素图片切换在Safari及移动端Firefox中失效问题排查

你遇到的问题其实是浏览器对替换元素（比如<img>）的CSS content属性行为实现不一致导致的，并不是MDN兼容性表错误，而是表中的“支持”是针对非替换元素（比如伪元素、<div>这类常规元素）的通用场景，没明确标注替换元素的特殊情况。

问题根源 #

<img>属于替换元素（浏览器会根据其属性渲染外部资源的元素），对于这类元素，Chrome/Edge实现了用content覆盖src的非标准行为，但Safari和部分Firefox版本（包括你测试的移动端Firefox 92.x）严格遵循了早期规范：替换元素的content属性仅在元素没有指定src（或src无效）时才会生效，一旦src存在，浏览器会优先渲染src对应的资源，完全忽略CSS的content设置。

正确的兼容实现方案 #

要实现横竖屏切换图片的需求，推荐用以下几种兼容性更好的方式：

方案1：用背景图代替<img>

把<img>换成<div>，通过background-image实现切换，这是所有浏览器都支持的标准方式：

#test_image {
  width: 300px;
  height: 200px;
  background-image: url(https://via.placeholder.com/300x200);
  background-size: cover;
  background-position: center;
}

@media (min-aspect-ratio: 9/7) {
  #test_image {
    background-image: url(https://picsum.photos/300/200);
  }
}

<div id="test_image" aria-label="图片描述"></div>

注意：要添加aria-label保证屏幕阅读器可访问性

方案2：通过媒体查询控制两个<img>的显示/隐藏

直接在HTML中放两张图片，用CSS控制不同屏幕比例下显示哪一张：

/* 默认显示竖屏图 */
#test_image_portrait { display: block; }
#test_image_landscape { display: none; }

/* 横屏时切换显示 */
@media (min-aspect-ratio: 9/7) {
  #test_image_portrait { display: none; }
  #test_image_landscape { display: block; }
}

<img id="test_image_portrait" src="https://via.placeholder.com/300x200" alt="图片描述">
<img id="test_image_landscape" src="https://picsum.photos/300/200" alt="图片描述">

方案3：用JavaScript动态修改src

如果必须保留单个<img>元素，可以监听窗口尺寸变化或屏幕旋转事件，动态修改src属性：

function updateImageSource() {
  const img = document.getElementById('test_image');
  const isLandscape = window.matchMedia('(min-aspect-ratio: 9/7)').matches;
  img.src = isLandscape 
    ? 'https://picsum.photos/300/200' 
    : 'https://via.placeholder.com/300x200';
}

// 初始化执行一次
updateImageSource();
// 监听窗口 resize 和屏幕旋转
window.addEventListener('resize', updateImageSource);
window.addEventListener('orientationchange', updateImageSource);

总结 #

你的原始代码依赖了Chrome/Edge的非标准实现，所以在Safari和移动端Firefox失效。MDN的兼容性表没有错误，但它的“支持”范围不包含替换元素的这种特殊用法。换成上面任意一种方案，都能在所有主流浏览器中实现预期效果。

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