为何设置container-type后图片消失？容器查询问题咨询

你遇到的元素消失问题，核心是容器查询容器的尺寸计算逻辑和浮动元素、max-width、图片尺寸属性的冲突：

• 当给元素设置container-type: inline-size时，该元素会成为容器查询的上下文容器，此时浏览器需要明确它的内联尺寸（宽度）来支持容器查询。
• 你同时给这些元素设置了float: right和max-width: 10%，再加上内部图片的width: max-content和height: max-content，形成了循环依赖：
  1. 浮动元素的宽度默认由内部内容决定；
  2. 但container-type: inline-size要求容器的宽度先被确定，才能计算内部内容的尺寸；
  3. 图片的width: max-content又试图使用原始图片宽度，而max-width: 100%又限制它不能超过容器宽度——这种相互依赖导致浏览器无法正确计算尺寸，最终容器宽度坍缩为0，元素也就看不见了。
• 另外，span是行内元素，虽然float会让它块级化，但结合container-type后，格式化上下文的变化进一步加剧了尺寸计算的异常。

要解决这个问题，需要把容器查询容器和浮动布局元素分离，同时调整图片的尺寸约束：

1. 分离容器查询和浮动元素 #

给每个浮动的图片容器（figure/span）外面套一层专门的容器，把container-type: inline-size、float、max-width这些属性移到外层容器上，避免浮动和容器查询的直接冲突。

2. 修正图片尺寸属性 #

去掉图片的width: max-content和height: max-content，改用width: 100%和height: auto，让图片自适应容器宽度并保持原始宽高比，避免尺寸计算的循环依赖。

修正后的代码 #

CSS #

/* 外层容器作为容器查询容器 + 浮动布局 */
.image-container {
  container-type: inline-size;
  margin: 0 0 0 1em; /* 调整margin避免图片挤在一起 */
  max-width: 10%;
  float: right;
}

/* 原figure/span仅作为图片载体，无需额外布局属性 */
figure.image, span.image {
  margin: 0;
}

/* 图片自适应容器 */
.image img {
  max-height: 500px;
  width: 100%;
  height: auto;
  max-width: 100%;
}

HTML #

<!DOCTYPE html>
<html>
  <body>
    <div class="image-container">
      <figure class="image">
        <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
      </figure>
    </div>
    <p>
      <div class="image-container">
        <span class="image">
          <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
        </span>
      </div>
      <div class="image-container">
        <span class="image">
          <img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
        </span>
      </div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </body>
</html>

额外说明 #

现在你可以正常使用容器查询了，比如添加以下CSS来根据容器宽度调整布局：

@container (max-width: 100px) {
  .image img {
    max-height: 200px;
    border-radius: 8px;
  }
}

当外层容器宽度小于100px时，图片会自动调整高度并添加圆角。

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