如何缩放图片使其更好适配flex容器 CSS图片适配问题求解

你当前代码的图片显示异常来自两个点：

• 直接给图片强制设置width: 100%+固定height: 250px，浏览器会忽略原图宽高比强行拉伸填充满尺寸，必然会出现变形、比例失调
• 右侧图片容器没有做边界限制，图片溢出容器时会破坏圆角效果，也无法自动适配容器尺寸变化

不需要调整HTML结构，只需要修改对应CSS即可，方案天然兼容响应式适配，不会出现固定px值带来的适配问题：

.food-container {
  display: flex;
  border-radius: 10px;
  background-color: orange;
  height: 250px;
  width: 750px;
  border: 1px solid black;
  /* 新增：盒模型设为border-box，避免边框、内边距撑大容器 */
  box-sizing: border-box;
}

h1 {
  font-weight: 800;
  font-size: 2.3rem;
  margin-bottom: 30px;
}

.left-side {
  width: 66%;
  padding: 10px 20px;
  /* 新增：和父容器统一盒模型规则，避免宽度溢出 */
  box-sizing: border-box;
}

.left-side>p {
  font-size: 1.1rem;
}

.right-side {
  width: 34%;
  /* 新增：高度和父容器保持一致，不用写死px */
  height: 100%;
  /* 新增：裁剪超出容器的内容 */
  overflow: hidden;
  /* 把圆角属性从img移到容器上，避免被溢出的图片破坏圆角效果 */
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.right-side>img {
  width: 100%;
  height: 100%;
  /* 核心属性：让图片保持原有宽高比缩放，自动裁剪多余部分填满容器，完全不会变形 */
  object-fit: cover;
}

• 后续做响应式调整时，只需要修改外层.food-container的尺寸（比如改成max-width: 750px; width: 100%适配移动端），图片会自动跟随容器尺寸适配，不需要额外调整图片参数
• 如果需要完整显示整张图片不裁剪，只需要把object-fit: cover改成object-fit: contain即可，当前场景下cover的填充效果和参考图完全一致。

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