Автоматически настроить высоту изображения на высоту текста

Question

Учитывая это HTML

<div class="flex">
  <div>
    <img src="https://via.placeholder.com/300x300" alt="">
  </div>

  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
  </div>
</div>

как я могу автоматически масштабировать высоту изображения с помощью текста div, в зависимости от ширины браузера и размера шрифта текста?

1. https://jsfiddle.net/msuL6pvx/ В этом случае изображение должно быть уменьшено до высоты, равной тексту
2. https://jsfiddle.net/msuL6pvx/1/ В этом случае изображение должно быть увеличенным до максимального размера (300x300) и не превышать этих размеров

Answer 1

Ну, насколько мне известно, размер изображения может быть увеличен по сравнению с размером текста, но его обратный случай невозможен.

Вот мой код. Я использую flexbox, чтобы увеличить высоту изображения в соответствии с размером текста. Дайте мне знать, если он соответствует вашим требованиям.

<div class="flex">
  <div class="image-container">
    <img src="https://via.placeholder.com/300x300" alt="">
  </div>

  <div class="text-container">
    <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
    </p>
  </div>
</div>

.flex{
  display:flex;
  flex-wrap:wrap;

}
.image-container{
  flex:1;
}
.text-container{
  flex:3;
}
.text-container p{
  font-size:2em;
  padding:10px;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}

Пример живой ссылки: https://codepen.io/pranaysharma995/pen/JjdQWyQ

Answer 2

Я не думаю, что это возможно с чистым CSS. Единственное, о чем я мог подумать, это использовать position: absolute для <img>, чтобы вывести его из потока в сочетании с max-height; затем настройте поле текста с помощью javascript.

https://jsfiddle.net/zphb0fLd/

Надеюсь, что это полезно.