缩放图像以匹配段落高度

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的背景中，因为它带来了其他含义...

非常欢迎您提出建议。

干杯， 考姆

Answer 1

只需在图片中设置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

Answer 2

这是我的解决方案：

<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

但是，您会在较小的屏幕上看到图像溢出。因此，您可以溢出：将其隐藏在图像的父级顶部以防止这种情况发生（但图像将被剪切），或者，正如您前面提到的，请仔细查看特定分辨率以防止这种情况。

祝您一切顺利，Axel