css - 图像容器的最小高度、最大高度

Question

我试图将我的图像放入容器中，但它溢出了。对于图像，我将容器的高度设置为 100%；对于容器，我指定了最小-最大高度。我认为这可行，但事实并非如此。此错误发生在手机屏幕上，而不是全屏上。当我给出 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>

Answer 1

我解决这个问题的方法是将 display flex 添加到 adminAddDeleteEdit__img。

 .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);
  display: flex;
  justify-content: center;
}

@Damzaky 谢谢。您的显示 block 想法使我想到了这个解决方案。