如何用纯CSS实现图片固定在右上角并随窗口自适应调整尺寸

需求说明 #

我该如何通过CSS同时使用高度和宽度属性调整图片尺寸？我需要将指定正方形图片固定在右上角，具体规则如下：

• 若视窗宽度大于高度，图片靠左对齐
• 若视窗高度大于宽度，图片靠上对齐
  同时图片需要跟随窗口较短边的尺寸变化自动调整大小，要求仅通过CSS实现，无需JS。

原有受限方案（仅适用于宽度为较长边的场景） #

img{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%
}

<img src="http://via.placeholder.com/500">

可实现完整需求的标准方案 #

核心用到vmin相对单位，1vmin等价于视窗宽度和高度中较小值的1%，搭配媒体查询判断视窗方向实现对齐规则：

img {
  /* 图片尺寸始终等于视窗短边长度，天然适配正方形要求 */
  width: 100vmin;
  height: 100vmin;
  position: fixed;
  /* 默认对齐右上角 */
  right: 0;
  top: 0;
}
/* 横屏场景：视窗宽度>高度，靠左对齐 */
@media (orientation: landscape) {
  img {
    left: 0;
    right: auto;
  }
}

<!-- 测试用正方形图片 -->
<img src="http://via.placeholder.com/500" alt="正方形测试图">

测试Temani Afif方案的优化版本 #

无需媒体查询即可实现全场景适配，新增aspect-ratio属性强制保持正方形比例，兼容性覆盖主流现代浏览器：

img{
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
}

<img src="http://via.placeholder.com/500">

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