Изображение с CSS фиксированное Высота динамическая Ширина

Question

У меня есть набор различных изображений, которые я хочу выстроить в горизонтальной строке. Я хочу установить высоту, но сохранить правильную ширину. (динамическая ширина)

Проблема в том, что ширина одинакова для всех изображений.

Любые идеи?

Это моя разметка и стиль:

<div class="jumbo"> 
    <ul> 
     <li><img src="picture1.jpg" /></li> 
     <li><img src="picture2.jpg" /></li> 
     <li><img src="picture3.jpg" /></li> 
    </ul> 
</div> 

.jumbo ul { 
    height: 430px; 
    width: 20000px; 
    margin-top:10px; 
    /*border: 2px solid red;*/ 
} 
.jumbo li { 
    float: left; 
    display: inline; 
    margin-left: 70px; 
} 

.jumbo img { 
    max-height:430px; 
    width: auto; 
} 

Answer 1

Два способа получить пропорциональное изменение размера. Либо установите контейнер (в вашем случае ul) на фиксированную высоту, а затем установите высоту изображения на 100% - не указывайте ширину - тогда ширина будет пропорциональна высоте (это то, что вы хотите, правильно?). В качестве альтернативы просто установите высоту изображения и оставьте ширину неизменной - опять же, ширина будет пропорциональной.