Question

这不是一个非常复杂的问题，但我无法找到答案或在网上找到一些东西。

我在父<div>内有两个元素：

一张图片（包含在一个单独的div中，其中包含float：left或float：right）
文本

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

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

为了匹配两个div，我通常使用包装div并使用“100％”调整包装div的高度。但是，这会将大小调整为较大的内部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

我会将图片作为<nd>用于包含background-image，并删除div内的div。

img会.container将文字保留在右侧，padding-left: 50%;因此背景图片的宽度为50％，100％为高度（由文本块确定......）

这是如何：

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

<强> HTML

background-size: 50% 100%

<强> CSS

<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>

Answer 2

我建议你只有一个解决方案。限制文本字符并使第二个div适合第一个div

将图像缩放为具有相同父级的其他元素的大小<div>

2 个答案: