Масштабировать изображение в соответствии с высотой абзаца

Question

Я пытаюсь выровнять текст div и image друг с другом.

Есть ли способ автоматически масштабировать изображение в соответствии с размером текстового блока, сохраняя при этом соотношение сторон изображения, не используя Javascript?

Мне бы хотелось, чтобы текст всегда был слева, картинка всегда была справа, а высота двух блоков одинакова.

Иллюстрировано:

нормальная ширина

широкоформатный

маленький экран

Я знаю, что это, конечно, будет работать только в пределах диапазона размеров экрана, и это нормально.

Я дошел до того, что смог масштабировать изображение по его высоте, но затем соотношение сторон исчезает (извините за встроенный стиль):

<div id="frame" style="display: flex; ">
  <div id="text">Text text text...</div>
  <div id="pic"><img src="img.jpg" style="width: 400px; min-height: 100%"/></div>
</div> 

Между ними у меня появилось другое решение, но, к сожалению, оно переполнено вправо - и в качестве дополнительного преимущества кажется, что он испортил рендеринг в Chrome (Firefox и IE, кажется,справиться все нормально)

    .containerdiv {
      display: flex;
      border: green 1px solid;
    }

    .textdiv {
      border: blue 1px solid;
    }

    .imgdiv {
      border: red 1px solid;
      min-height: 100%;
      max-height: 100%;
    }

    .imgdiv img {
      height: 100px;
      min-width: auto;
      max-width: auto;
      min-height: 100%;
      max-height: 100%;
    }

   <div id="l2_aboutdiv" class="containerdiv">
      <div class="textdiv">
Lorem ipsum molestie netus augue habitant feugiat sollicitudin morbi aenean eget scelerisque bibendum, commodo luctus rutrum conubia proin venenatis senectus blandit porttitor fusce congue.
Hendrerit accumsan eleifend cursus sit in sapien, euismod bibendum pulvinar litora quisque ultrices, a netus orci proin accumsan quisque tempor fusce tempus vestibulum facilisis tellus suspendisse senectus blandit per curabitur mollis elementum.
Cursus proin tortor sodales nisi risus nisl litora, fusce purus augue vehicula hendrerit lacinia magna vivamus, ac imperdiet turpis senectus ultricies vestibulum.
      </div>
      <div class="imgdiv">
        <img src="https://i5.walmartimages.com/asr/0a06f9d8-71c6-4d57-b864-6481d273ebcd_1.5993f51524d8f0759355b2c1b657bfb7.jpeg" />
      </div>
   </div>

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

Ваши предложения будут приветствоваться.

Приветствия, Kom

Answer 1

Вот мое решение:

<div class="container">
    <div class="container__texts">
        <p>Nunc ultricies sapien tortor. Phasellus dictum orci mauris, id semper mi viverra aliquet. Pellentesque sagittis nisl id justo luctus, vel luctus tortor ornare. Nunc elementum eleifend leo vitae fringilla. Proin interdum consectetur tellus. Suspendisse sapien sapien, tincidunt vitae consectetur vel, imperdiet quis velit. Aliquam venenatis dolor condimentum molestie feugiat. Curabitur turpis enim, placerat in lorem congue, feugiat sollicitudin est. Nullam tincidunt nisl eu posuere porta. Aliquam tempus ligula sem.</p>
        <p>Nunc ultricies sapien tortor. Phasellus dictum orci mauris, id semper mi viverra aliquet. Pellentesque sagittis nisl id justo luctus, vel luctus tortor ornare. Nunc elementum eleifend leo vitae fringilla. Proin interdum consectetur tellus. Suspendisse sapien sapien, tincidunt vitae consectetur vel, imperdiet quis velit. Aliquam venenatis dolor condimentum molestie feugiat. Curabitur turpis enim, placerat in lorem congue, feugiat sollicitudin est. Nullam tincidunt nisl eu posuere porta. Aliquam tempus ligula sem.</p>
    </div>

    <div class="container__img">
        <img src="https://static.dezeen.com/uploads/2019/02/best-uk-hotels-interiors-dezeen-roundups-col-4.jpg" class="img"/>
    </div>
</div>

CSS:

.container{
    width:60%;
    display:flex;
}

.container__texts{
    width:50%;
}

.container__img{
    width:50%;
    position:relative;
}

.container__img img{
    height:100%;
    width:auto;
    display:block;
    position:absolute;
}

Живой пример здесь: https://codepen.io/AxelCardinaels/pen/qvZpNy

Однако вы увидите это на меньшем экранеизображение переполнится.Таким образом, вы можете либо поместить переполнение: скрытый на родительском верхе вашего изображения, чтобы предотвратить это (но ваше изображение будет обрезано), либо, как вы упоминали раньше, внимательно посмотреть на конкретное разрешение, чтобы предотвратить это.

Желаю тебе всего наилучшего, Аксель

Answer 2

Просто установите width:100%; и height:auto; на изображение, чтобы увеличить его, проверьте код ниже

#frame{
  display: flex;
  flex-flow:row;
  border: 5px solid green;
}

#text{
  border: 5px solid green;
  width:100%;
  margin: 10px;
}

#pic{
  border: 5px solid green;
  width:100%;
  margin: 10px;
}

#pic img {
  height: auto;
  width: 100%;
}

<div id="frame">
  <div id="text">Text text text...</div>
  <div id="pic"><img src="https://via.placeholder.com/400"/></div>
</div>

Проверьте это fiddle