Css 动态块内的响应图像

我需要编写以下代码块。主块是响应性的，内部还有另外两个块，其中一个是静态宽度，另一个是动态img。如何将图像设置为流体宽度，而不是主容器内的静态高度

---

屏幕截图在这里-

它需要两个包装器div，但它似乎可以工作：

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>

---

不太清楚。你也应该告诉我们你是怎么做的？谢谢，是类似的东西，我应该使图像高度与主块高度相同。因此允许图像被扭曲？是的，理想情况下，它应该适合它的块，而不改变纵横比。

.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%;
}