html - 增加图像的高度，保持宽度不变

Question

在响应式页面布局中，我想增加图像的高度，同时保持宽度不变。 当我更改图像宽度时，它会反射(reflect)出来，但更改高度不会产生影响。

所以我将 100% 高度添加到父 div .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">

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