css - 动态块内的响应式图像

Question

我需要编写以下代码块。主块是响应式的，它内部还有另外两个块，其中一个具有静态宽度，另一个是动态的（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%;
}