響應式圖像並排不同寬度但高度相同

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/