title: CSS image fixed Height dynamic Width
body: <p>I have a set of different images that I want to line up on a horizontal row.
  I want to set the height but keep the correct width. (dynamic width)</p>
  
  <p>The problem is that the width is the same for all pictures. </p>
  
  <p>Any ideas?</p>
  
  <p>This is my markup and style:</p>
  
  <pre><code>&lt;div class="jumbo"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;img src="picture1.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="picture2.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="picture3.jpg" /&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>