如何根据其中的图像动态增加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/[email protected]"
            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%;
}

我希望我的班级模态内容和我的班级幻灯片根据其内部的高度动态增加。使用此代码，容器高度不会增加。我有不同高度的图像。有什么办法可以解决这个问题？

Answer 1

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

.modal-content

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