如何根据其中存在的图像动态增加 div 高度？

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%;
}

我希望我的类 modal-content 和类 my-slides 根据其中存在的高度动态增加。使用此代码，容器高度不会增加。我有不同高度的图像。有没有办法解决这个问题？

Answer 1

您可以通过将值 max-content 用于 height .modal-content 元素的 CSS 样式来解决此问题，例如：

.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