缩放图像以匹配段落高度

Question

我试图在div文本和image彼此之间对齐。

有没有办法自动缩放图像以匹配文本块的大小，同时保持图像的纵横比不使用Javascript？

我希望文本总是在左边，图片总是在右边，两个块的高度是相同的。

图说：

normal width

widescreen

small screen

我知道这当然只能在一定的屏幕尺寸范围内工作，而且还可以。

我到目前为止能够沿着它的高度缩放图像，但是然后宽高比消失了（抱歉内联样式）：

<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

只需将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