div高达旁边的图像

Question

请检查我制作http://jsfiddle.net/2uJKR/80/的小提琴。

这是html

<div class="wrap">
 <div class="box">
  <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/beautiful-woman-holding-an-open-umbrella-100171690.jpg">
 </div>

 <div class="box">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
</div>

和风格

img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}
.wrap {margin:0 auto;max-width:500px;width:100%;}
.box {width:50%;float:left;background-color:red;overflow:hidden;}
.bop p {max-height:100px;width:50%;}

我的问题是右边的.box在图像下溢出。我的想象力是使右侧.box与缩放时的图像一样高。

我怎么能做到？

Answer 1

这绝对是一个棘手的答案，并没有完全澄清，但我会尽我所能。

CSS 本身没有能力在没有静态大小的情况下强制使用相同的height选项。

为了使其与dynamic and changing content一起使用，您需要一点JS magic。

在一个示例中，我使font size保持不变，如果没有滚动，则内容根本无法查看。这不会调整font-size，只需为用户提供一个滚动条即可使用。

http://jsfiddle.net/X8B4r/2/

在另一个例子中，我根据window的大小更改了字体大小。在刷新之前，这不会自动调整字体大小，但会强制initial load of the page正确适合。

http://jsfiddle.net/X8B4r/3/

这是一个适合您的解决方案吗？