如何根据其中存在的图像动态增加 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/[e-mail]"

            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

您可以通过对元素使用CSS 样式的值max-content来解决此问题，例如：height.modal-content.modal-content {&nbsp; position: relative;&nbsp; border-radius: 4px;&nbsp; padding: 24px;&nbsp; margin-left: auto;&nbsp; margin-right: auto;&nbsp; width: 70%;&nbsp; max-width: 1000px;&nbsp; border: none;&nbsp; background-color: #fff;&nbsp; height: max-content;&nbsp; &nbsp;}