Как динамически увеличить высоту div на основе изображения внутри него? - PullRequest
Новая
       5

Как динамически увеличить высоту div на основе изображения внутри него?

1 голос
/ 25 апреля 2020 
<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 и class my-slides динамически увеличивались в зависимости от высоты, присутствующей внутри него. С этим кодом высота контейнера не увеличивается. У меня есть изображения с разной высоты. Есть ли способ это исправить?

1 Ответ

1 голос
/ 25 апреля 2020

Вы можете решить эту проблему, используя значение max-content для стиля height CSS для элемента .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;   
}

Рабочая скрипка

...