移动端图片容器溢出求助：min/max-height设置无效

我尝试把图片适配到设置了min-height和max-height的容器里，给图片设置了相对容器的高度，但手机屏幕上会出现溢出，全屏显示正常。设置固定height:200px能解决但不符合需求。

CSS代码 #

.adminAddDeleteEdit__img {
  height: auto;
  min-height: 200px;
  max-height: 400px;
  width: auto;
  min-width: 200px;
  max-width: 600px;
  border: 3px solid var(--main-color);
  border-radius: var(--admin-borderRadius);
  /* overflow: hidden; */
}
.adminAddDeleteEdit__img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--admin-borderRadius);
}

HTML代码 #

<div className="adminAddDeleteEdit__img">
  <Swiper
    modules={[Navigation, A11y, EffectFade, Mousewheel]}
    slidesPerView={1}
    loop
    effect="fade"
    navigation
    className="carousel__swiper"
  >
    {selectedItem.images?.map((img) => (
      <SwiperSlide key={img.name + uuidv4()}>
        <img src={img} alt="" loading="lazy" />
      </SwiperSlide>
    ))}
  </Swiper>
</div>

问题截图 #

解决方案 #

1. 约束Swiper容器的高度 #

Swiper组件默认不会继承父容器的高度限制，容易在移动端撑开容器。给Swiper容器添加样式：

.carousel__swiper {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
}

让Swiper完全继承父容器的高度范围，避免自身高度不受控。

2. 调整图片的适配逻辑 #

将图片的width: auto改为width: 100%，确保窄屏时图片优先适配容器宽度，再通过object-fit: contain维持比例：

.adminAddDeleteEdit__img img {
  width: 100%; /* 替换原width: auto */
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--admin-borderRadius);
}

3. 开启容器溢出裁剪（可选） #

如果仍有溢出，取消父容器的注释，启用overflow: hidden裁剪超出内容：

.adminAddDeleteEdit__img {
  /* ...其他样式 */
  overflow: hidden;
}

4. 移动端媒体查询优化（可选） #

针对小屏幕单独调整容器的高度范围，避免容器过高撑出屏幕：

@media (max-width: 768px) {
  .adminAddDeleteEdit__img {
    min-height: 150px;
    max-height: 300px;
  }
}

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