响应图像并排不同的宽度但相同的高度

Question

我正在尝试将两个不同宽度的图像设置为相同的高度。我已将图像保存为一个大小，以便在全宽（1140像素）时它们出现在相同的高度，但是当浏览器变小时，您会注意到图像不会保持相同的高度。我真的被卡住了！任何帮助将不胜感激。

这是小提琴http://jsfiddle.net/jn7g1qxg/

打开使用java或其他任何东西！

html

<div class="wrap">

<div class="row">
    <div class="col-66">
         <div class="col-inner">
         <img src="http://i58.tinypic.com/21jvj0y.jpg">
         </div>
    </div>

       <div class="col-33">
         <div class="col-inner">
         <img src="http://i57.tinypic.com/alovbq.jpg">
         </div>
    </div>
</div>

</div>

CSS

.wrap {
    max-width:1140px;
}

img {
    max-width:100%;
}

    .col-33 {
        float:left;
        width:33.3%;
    }

    .col-66 {
        float:left;
        width:66.6%;
    }

    .col-inner {
        padding:0 20px;
    }

Answer 1

以img

设置高度

img {
max-width:100%;
height: 200px;
}

http://jsfiddle.net/jn7g1qxg/2/