如何使用HTML和CSS实现图片盒子响应式，避免图片超出容器

问题根因 #

• 媒体查询内的.box-img设置了固定宽度602px，当视口宽度较小时，该固定宽度大于父容器.card-container的65vw实际宽度，直接导致图片容器溢出父级
• 图片容器和图片本身没有添加响应式最大宽度限制，缺乏溢出兜底规则
• 弹性布局子元素对齐方式设置不合理，圆角规则冗余适配性差

修复代码 #

全局基础样式补充 #

先添加通用响应式图片规则，从根源避免图片溢出问题：

img {
  max-width: 100%;
  display: block; /* 消除图片默认底部的空白缝隙 */
}

修正后的基础CSS #

body {
  font-family: "Manrope", sans-serif;
  margin: auto;
  background-color: hsl(210, 46%, 95%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 0; /* 小视口下避免卡片贴顶贴底 */
}

.card-container {
  position: relative;
  display: flex;
  max-width: 1140px;
  width: 95vw;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden; /* 父容器统一控制溢出隐藏和圆角，不用单独给子元素设置 */
}

.box-img {
  position: relative;
  flex: 0 0 540px; /* 弹性布局下用flex-basis设置固定宽度，适配性更强 */
  max-width: 100%; /* 兜底保证不超出父容器 */
}

.box-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.body-card {
  position: relative;
  padding: 2rem 4rem 2rem 3rem;
  max-width: 600px;
}

修正后的媒体查询 #

@media (max-width: 992px) {
  .card-container {
    flex-direction: column-reverse;
    width: 65vw;
    max-width: 600px; /* 限制移动端最大宽度，避免大平板下卡片过宽 */
  }

  .box-img {
    flex: unset; /* 取消桌面端的固定宽度设置 */
    width: 100%;
    aspect-ratio: 602/308; /* 用宽高比控制展示比例，不用写死高度，适配所有视口 */
  }
}

相关最佳实践 #

• 弹性布局下固定尺寸优先使用flex-basis设置，配合max-width做响应式兜底，比直接写固定width适配性更强
• 响应式场景尽量用aspect-ratio控制元素宽高比，代替固定高度，保证不同宽度下展示比例一致
• 有圆角的容器优先在父级加overflow: hidden，不用单独给子元素设置圆角，避免出现漏边问题
• 全局默认给img设置max-width: 100%，从根源避免图片超出父容器的问题

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