增加图像保持宽度的高度恒定

Question

在响应式页面布局中，我想增加图像的高度，保持宽度不变。 当我改变图像宽度时，它会反射但是改变高度并没有什么不同。

所以我向父div 100%添加了.content container高度。但这也没有任何区别。

如何在这里增加高度以保持宽度不变？

FIDDLE：http://jsfiddle.net/g83e8/

我使用过如下容器：

<div id="content1" class="content">

    <div class="container">  
        <div class="img-container1">

            <img src="http://placehold.it/931x754"  alt="..." class="img-responsive img-rounded">       
        </div>
        <div class="text-container">
            <p>TEST</p>                
        </div>
        <div class="another-container">
            <p>TEST</p>
        </div>
    </div>

</div>

的CSS：

.content > container {height: 100%;}

    .img-container1 { float:left; height:60% !important; width:50%}

Answer 1

要仅增加图像的高度，可以使用以下样式：

<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" style="height: 100px">

使用像素而不是百分比可以让您更轻松地控制大小，因为在使用像素时不会从父元素继承大小。