动态块内的响应图像

Question

我需要编写以下块代码。主块是响应式的，内部有2个其他块，其中一个具有静态宽度，另一个是动态（img）。如何使图像成为流体宽度，但主容器内的静态高度？

截图位于此处 - http://joxi.ru/9xcvUtg5CbAxZuPPZH4

Answer 1

它需要2个包装div，但似乎有效： http://jsfiddle.net/LSRPk/2/

HTML：

<div class="bonsai-kitten">
    any<br>content<br><br><br><br><br><br><br>height
    <div class="rubberimage">
      <div class="vertical-centerer">
        <img src="kitten.jpg">
      </div>
    </div>
</div>

CSS：

.bonsai-kitten {
    border: 3px solid red;
    position: relative;
}

/* image area next to the sidebar */
.rubberimage {
    position: absolute;
    left: 200px; /* assuming fixed sidebar width */
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.rubberimage .vertical-centerer {
    position: absolute;
    left: 0;  right: 0;  /* means width: 100%; */
    top: 50%;
    line-height: 10000px; /* large enough? */
    margin-top:  -5000px;
    vertical-align: middle;
}

.rubberimage img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}