如何仅用纯CSS根据元素自身宽高比设置不同背景

不需要JavaScript，完全可以实现类似元素级orientation判断的效果，目前有两类可行方案： #

方案1：CSS容器查询（首选，标准实现） #

这是CSS官方原生支持的标准能力，逻辑清晰易维护，兼容Chrome 105+、Firefox 110+、Safari 16+等绝大多数现代浏览器。
注意：内容自动撑开的元素如果直接设置container-type: size会出现尺寸坍塌，需要加一层无样式的父容器承接尺寸查询，代码示例：

/* 包裹层不设固定宽高，完全由内部目标div的内容撑开 */
.target-wrapper {
  container-type: size;
  container-name: contentBox;
  display: flow-root;
}
/* 目标div占满整个包裹层 */
.target-div {
  width: 100%;
  height: 100%;
}
/* 宽度大于高度时的样式 */
@container contentBox (aspect-ratio > 1) {
  .target-div {
    background: #e3f2fd;
    /* 这里除了背景，还可以按需加其他横版专属样式 */
  }
}
/* 高度大于宽度时的样式 */
@container contentBox (aspect-ratio < 1) {
  .target-div {
    background: #f3e5f5;
    /* 这里除了背景，还可以按需加其他竖版专属样式 */
  }
}
/* 宽高相等（正方形）的样式，可按需添加 */
@container contentBox (aspect-ratio: 1) {
  .target-div {
    background: #fff3e0;
  }
}

容器查询方案不止能切换背景，还能针对不同尺寸比例给元素设置任意不同样式，扩展性远强于hack方案。 #

方案2：CSS背景Hack（兼容旧浏览器） #

如果需要兼容不支持容器查询的旧版本浏览器，可以通过CSS背景尺寸的计算逻辑实现自动切换，不需要额外嵌套元素，直接给目标div设置样式即可。该方案仅适合切换背景，无法扩展其他样式，且可读性较低，非必要不优先使用：

.target-div {
  /* 第一层为宽>高时显示的背景，第二层为高>宽时显示的背景，可替换为渐变、色值 */
  background:
    url(./landscape-bg.png),
    url(./portrait-bg.png);
  background-repeat: no-repeat;
  /* 核心计算逻辑，自动匹配当前尺寸比例显示对应背景 */
  background-size:
    max(100%, 100% * (1 - sign(100% - 100%))) 100%,
    100% max(100%, 100% * (1 - sign(100% - 100%)));
}

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