如何根据其中存在的图像动态增加 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 {

  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;   

}