如何让浏览器根据图片实际渲染宽度选择srcset中的适配图片？

好问题！这种动态布局（自由嵌套行列、响应式折叠）下的图片适配确实容易让人犯难，但完全不需要借助JavaScript，原生HTML/CSS就能实现。下面给你两种针对性的解决方案：

一、用sizes属性的动态规则匹配布局 #

sizes属性的核心作用就是告诉浏览器：「在某个布局场景下，这张图片的实际显示宽度是多少」，浏览器会结合这个信息和设备像素比，自动从srcset里挑最合适的图片。

针对你说的“编辑自由嵌套行列、列会折叠”的情况，你可以给sizes添加多组媒体查询，覆盖不同视口或布局下的图片宽度：

举个实际例子，假设你的布局逻辑是：

• 视口≥1200px时，图片所在列占容器的50%（容器固定1200px，所以图片实际宽600px）
• 视口在768px-1199px时，列占容器的100%（容器是视口的90%）
• 视口<768px时，图片占满整个视口

对应的代码写法是：

<img
  srcset="400x300.jpg 400w,
          800x600.jpg 800w,
          1200x900.jpg 1200w"
  sizes="(min-width: 1200px) 600px,
         (min-width: 768px) 90vw,
         100vw"
  src="800x600.jpg"
  alt="示例图片"
>

浏览器会根据当前布局匹配sizes里的规则，算出图片的显示宽度，再对比srcset里的图片宽度，自动选最接近（且不小于需求）的那张——比如你说的1920px视口场景，浏览器匹配到600px的规则，就会选800px宽的图片（刚好满足1x屏需求，2x屏会选1200px的）。

二、用CSS容器查询应对完全动态的嵌套布局 #

如果你的布局是完全自由嵌套的（比如编辑可以随意加多层行列，没法用视口媒体查询覆盖所有情况），那CSS容器查询就是更完美的方案——它能根据图片父容器的实际宽度来调整规则，而不是依赖视口。

步骤很简单：

1. 给图片的父容器开启容器查询上下文：

.image-wrapper {
  container-type: inline-size; /* 让容器基于自身宽度触发查询 */
}

2. 用容器查询给不同宽度的父容器设置图片的显示宽度：

<div class="image-wrapper">
  <img
    srcset="400x300.jpg 400w,
            800x600.jpg 800w,
            1200x900.jpg 1200w"
    sizes="--img-display-width"
    src="800x600.jpg"
    alt="示例图片"
    class="dynamic-img"
  >
</div>

@container (width >= 600px) {
  .dynamic-img {
    --img-display-width: 600px; /* 父容器≥600px时，图片显示宽600px */
  }
}

@container (width >= 900px) {
  .dynamic-img {
    --img-display-width: 900px; /* 父容器≥900px时，图片显示宽900px */
  }
}

@container (width < 600px) {
  .dynamic-img {
    --img-display-width: 100%; /* 父容器<600px时，图片占满父容器 */
  }
}

这样不管父容器是嵌套在多少层行列里，只要它的宽度变化，--img-display-width就会跟着更新，浏览器就能准确知道图片的实际渲染宽度，自动选对图片。

额外提醒 #

• 容器查询已经被现代浏览器广泛支持（Chrome 105+、Firefox 110+、Safari 16+），不用担心兼容性问题。
• 如果你需要兼容更老的浏览器，优先用第一种sizes+媒体查询的方案，覆盖主要的布局场景即可。

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