how to increase the div height dynamically based on the image present inside it?

Question

<div id="my-modal" class="modal">

      <span class="closed" onclick="closeModal()">
        <img
          data-src="img/close-left-product-ui-ux-design-cover.webp"
          style="width: 24px; height: 24px;"
          alt="close button"
          class="img-fluid lazyload"
        />
      </span>

      <div class="modal-content">

        <div class="my-slides">

          <img
            src="img/image1@2x.webp"
            class="img-fluid lazyload"
            alt="ecolight product"
          />
        </div>
      </div>
    </div>

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  padding-bottom: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  border-radius: 4px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 1000px;
  border: none;
  background-color: #fff;
}

.my-slides {
  width: 100%;
}

.my-slides img {
  width: 100%;
}

I want my class modal-content and class my-slides dynamically increase based on the height present inside it. With this code, the container height is not increasing. I have images with different heights. Is there any way to fix this ?

Answer 1

You can resolve this issue by using value max-content for height CSS style for the .modal-content element like:

.modal-content {
  position: relative;
  border-radius: 4px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 1000px;
  border: none;
  background-color: #fff;
  height: max-content;   
}

Working Fiddle