如何让图片自适应缩小但不超过原生尺寸（Flex布局场景）

完全可以通过纯CSS实现需求，问题根源在于Flex容器的默认行为：你的figure是flex-direction: column的Flex容器，同时它作为section的Flex项目被设置了flex:1，当父容器section宽度足够时，figure会被拉伸至超出图片原生尺寸的宽度，此时img的max-width:100%是基于被拉伸后的figure宽度，导致图片被放大超出原生尺寸。

下面提供两种可行的纯CSS解决方案：

方案一：限制figure的最大宽度为内容宽度 #

通过给figure添加max-width: fit-content;，让它的最大宽度由内部内容（图片、标题、figcaption）决定，不会被Flex容器过度拉伸，同时保留flex:1让它在空间不足时可以缩小，图片的max-width:100%会跟随figure的宽度自适应缩放，且不会超过自身原生尺寸。

修改后的CSS代码：

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: fit-content; /* 限制figure最大宽度为内容宽度 */
}

figure img {
  max-width: 100%;
}

section p {
  flex: 1;
}

方案二：让图片不被Flex容器拉伸 #

给img添加align-self: flex-start;，取消Flex项目默认的拉伸行为，让图片保持自身的原生尺寸，当figure宽度缩小时，max-width:100%会让图片跟着缩小，确保响应式效果。这种方案下，figure仍会被拉伸，但图片不会填满figure的宽度，仅显示自身原生大小。

修改后的CSS代码：

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

figure img {
  max-width: 100%;
  align-self: flex-start; /* 禁止图片被拉伸，保留原生尺寸 */
}

section p {
  flex: 1;
}

你可以根据布局需求选择其中一种方案，两种都能实现图片响应式缩小且不超过原生尺寸的效果。

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