css根据div容器的高度制作图像高度

Question

HTML代码：

<div id="container">
  <div id="sidebar">
    <img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="222px">
  </div>

  <div id="content">
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p>
    <p>Main content</p
 </div>   

访问http://jsfiddle.net/dlamichhane/Hv2mq/1/以了解详细代码情况。

我有一个主div容器，它包含两个div。在第一个div中它只包含图像标记，在第二个div中，内容的大小动态增长（有时内容较少，有时内容较多）。在这种情况下，如何使图像的高度与主div容器的高度相匹配。注意：图像不应该拉伸。

Answer 1

我认为没有简单明了的答案。 有几种不同的方法可以实现这一点，关于这一点的广泛文章是关于css-tricks的Fluid Width Equal Height Columns。