CSS图像高度100%(自动宽度)，旁边有动态文本

Question

我正在尝试在左侧设置文本样式，在右侧设置图像样式。此样式应可用于具有不同比率/格式的图像，因此不能设置固定高度。文本的长度也是动态的。图像应始终填充剖面的整个高度，其宽度应按比例缩放，以便图像比例保持不变。

我已经尝试过在网上找到解决方案，我得到的两个最好的方法是：

(1(位置绝对+显示灵活

缩放浏览器时，图像的行为是正确的，但由于绝对位置，文本位于图像后面。

<style>
body {
  background-color: red;
}
.box {
  background-color: #ffffff;
  display: flex;
  position: relative;
}
.content-wrapper {
  padding: 20px;
}
button {
  margin-top: 30px;
}
img {
 height: 100%;
 position: absolute;
 right: 0;
}
</style>
<div class="box">
  <div class="content-wrapper">
    <div>
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <button>Click here</button>
  </div>
  <img src="https://via.placeholder.com/500x300.png?text=placeholder+image" alt="">
</div>

https://jsfiddle.net/7tcz2dn4/

(2(普通显示器柔性

这种解决方案在真正宽的屏幕分辨率下表现正确，但在较小的分辨率下会出现x轴滚动条。

<style>
body {
  background-color: red;
}
.box {
  background-color: #ffffff;
  display: flex;
}
.content-wrapper {
  padding: 20px;
  flex-direction: column;
  justify-content: space-between;
}
button {
  margin-top: 30px;
}
img {
  height: 100%;
}
</style>
<div class="box">
  <div class="content-wrapper">
    <div>
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <button>Click here</button>
  </div>
  <div>
    <img src="https://via.placeholder.com/400x300.png?text=placeholder image" alt="">
  </div>
</div>

https://jsfiddle.net/t8o4L29g/

HTML结构没有修复，所以如果我需要包装/打开元素以获得所需的结果，这不是问题。提前谢谢大家！

Answer 1

对于您的问题，使用列是一个好主意，您可以为左列提供文本，为右列提供图像。

当使用图像时，这里有一个提示：

<style>
img {
   object-fit: cover;
   object-position: center;
}
</style>

当对图像使用这些样式时，您可以在不破坏图像的情况下设置高度和宽度。