Min-Height, Max-Height for Image container-CodePudding

I am trying to fit my image into a container but it is overflowing. For the image, I gave height 100% to the container; for the container, I specified min-max height. I thought this could work but it is not. This error happens on the phone screen, not on the full screen. When I give height:200px that solves the problem but that is not what I want.

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>

CodePudding user response：

How I solve this problem was by adding display flex to 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 thank you. Your display block idea led me to this solution.

CodePudding user response：

Add display: block to the .adminAddDeleteEdit__img img rule:

.adminAddDeleteEdit__img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--admin-borderRadius);
  display: block;
}