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

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/