如何在不使用背景图的前提下调整flexbox内img元素的大小？

你遇到的img不遵循max-height限制的问题，核心原因是img的父级元素高度继承链断裂，浏览器在父元素没有显式定义高度时，会忽略max-height属性。下面是两种可直接落地、不影响图片点击交互的方案： #

方案1：object-fit适配方案 #

• 先确认从轮播最外层容器到img标签的所有父元素，都设置了height: 100%，形成完整的高度继承链
• 给轮播内的img设置如下样式：

.carousel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

如果需要图片铺满容器且不变形、允许裁剪边缘，可以把object-fit的值换成cover。 #

方案2：Grid布局兼容方案（兼容所有现代浏览器，不需要依赖object-fit） #

给img的直接父级（滑动项容器）设置grid布局即可自动约束图片尺寸：

.carousel-slide {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
}

这个方案会自动把图片约束在父容器范围内，同时实现水平垂直居中，不会拦截img本身的点击事件，完全符合无障碍和交互要求。 #

注意事项 #

• 不要同时给img设置width: 100%和height: 100%，会导致图片比例失调
• 如果使用定位方案控制img位置，需要给父容器设置position: relative，同时给img设置position: absolute; inset: 0; margin: auto;，再配合max-width和max-height也能实现不溢出的效果

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