将图像缩放到同一父元素中其他元素的大小 <div>

Question

这不是一个很复杂的问题，但我找不到答案，也无法在网上找到相关信息。

我在父元素中有两个元素 <div>:

一张图片（包含在带有 float:left 或 float:right 的单独 div 中）
文本

父级 div 的宽度固定为 600px。高度可变。

我希望图像的高度大小与文本块的高度匹配。全尺寸图片通常比文本块大。

为了匹配两个 divs，我通常使用包装器 div 并使用“100%”调整包装的 divs 的高度。但是，这确实会将大小调整为内部 div 中较大的一个的大小。在我的例子中，带有图像的 div 在大多数情况下会比文本块大，所以包装器 div 不是选项。使用固定高度或最大高度也不行。

<div>
  <div style="float:left;"><img src="..." /></div>
  <div><p>some text probably smaller than the full-sized image</p></div>
</div>

tl;dr：我需要将包含图像的第一个内部 div 的高度调整为包含文本的第二个内部 div 的高度，无论文本是更大还是更大小于全尺寸图像。

JsFiddle：https://jsfiddle.net/5Lf1gmor/1/

顺便说一句，文本不必包含在单独的 div 中。 <p>就够了，不过我觉得还是需要一个容器来解决这个问题。

Answer 1

我会将图像作为包含 div 的 background-image 并去掉其中包含 img 的 div。

.container 将 padding-left: 50%; 将其中的文本保持在右侧，background-size: 50% 100% 背景图像将占据其宽度的 50%，以及 100%它的高度（由文本块决定...）

方法如下：

https://jsfiddle.net/ronency/hxcdd5az/

HTML

<div class="container">
  <div class="text-container">
    <p>
      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>
</div>

CSS

.container {
  background: url("https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg") left top no-repeat;
  font-size: 1.1em;
  border: 1px solid black;
  padding-left: 50%;
  background-size: 50% 100%;
}

.text-container {
  background-color: white;
}

将图像缩放到同一父元素中其他元素的大小 <div>

Scale Image to Size of Other Element Withing the Same Parent <div>

html

css

scaling