css - 动态 block 内的响应图像

Question

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