如何让图片适配figure标签？响应式布局问题求助

要让图片自动适配figure并随屏幕缩放，只需要调整几个关键样式，核心是让figure和图片都能继承父容器的宽度：

修改后的CSS代码 #

figure {
  margin: 0px;
  width: 100%; /* 让figure占满父容器article的宽度 */
  height: 100%; /* 确保figure高度和父容器设置的高度一致 */
  overflow: hidden; /* 防止图片超出圆角范围 */
}

#activities-nav {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  gap: 3%;
  height: 450px;
  padding: 5px;
  margin: 0px 16px 0px 16px;
}

.activity-picture {
  border-radius: 10px 10px 0px 0px;
  width: 100%; /* 替换固定宽度，让图片跟随容器宽度缩放 */
  height: 100%;
  object-fit: cover;
}

.long-activity-card {
  border: 1px dashed red;
  flex-basis: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.medium-activity-card {
  border: 1px dashed blue;
  flex-basis: 55%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.small-activity-card {
  border: 1px dashed green;
  flex-basis: 40%;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #F2F2F2;
  cursor: pointer;
}

.long-activity-card figure {
  height: 90%;
}

.medium-activity-card figure {
  height: 85%;
}

.small-activity-card figure {
  height: 80%;
}

关键修改说明 #

• 给figure添加width: 100%：让figure完全填充父容器（article）的宽度，因为article是flex布局中的项，宽度由flex容器自动分配，figure需要主动占满这个宽度。
• 将.activity-picture的width从固定值100px改为100%：图片宽度跟随figure的宽度变化，实现响应式缩放，配合object-fit: cover保证图片比例不扭曲，同时填满容器高度。
• 给figure添加height: 100%：确保figure的高度完全匹配你为不同卡片设置的高度比例，避免出现空白或偏移。

为什么之前的方法无效？ #

• 设置图片宽度为百分比时，因为figure没有设置宽度，默认是收缩包裹内容，导致图片的百分比没有正确的参考容器，反而触发了flex项的尺寸变化。
• 使用fit-content等属性时，同样因为figure没有占满父容器宽度，图片无法获得正确的缩放基准。

HTML部分无需修改，保持原结构即可。

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