调整内容大小后调整div以适合内容（图像）

Question

这似乎是一个棘手的问题:)。

这是一个小提琴http://jsfiddle.net/xhrkLwwL/2/，还有一些伪代码的描述（小提琴中的准确代码）：

<div id="gridSettings" style="height:100%">
    <div id="gridSmaller" style="height:100%">
        <img id="gridSmallerImg" style="height:200%"/>
    </div>
</div>

我正在尝试仅基于身高和css制作响应式方形图标。

理论如下：

我有一个方形图标图像（200x400px - 用于悬停目的的二合一）。 图像作为<IMG>输入到html（不作为css背景属性）。 <IMG>有它的包装DIV和<IMG>高度：200％。我期待IMG缩放，以便我只能看到前50％，DIV的宽度由IMG的宽度决定，这与可见高度相同（总高度的50％） - ＆gt;因为图像是200x400px ......你去......一个广场:)。

实践：

直到我调整窗口大小才有效。图标包装DIV的高度是窗口高度的10％，因此如果我调整窗口大小，DIV高度也一样，内部IMG也是如此。但是DIV's宽度保持与调整大小之前相同，因此我的图标被剪裁:(。如果我然后更改任何css道具（通过FF DOM Inspector，悬停事件...），DIV更新纠正宽度。

有没有人有任何想法，可能是什么导致它？

非常感谢你：）

PS：你不需要给我发送JS解决方案。如果需要，我可以自己写。