CSS图像固定高度动态宽度

Question

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)

The problem is that the width is the same for all pictures.

Any ideas?

This is my markup and style:

<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

Two ways to get proportional sizing. Either set the container (in your case ul) to a fixed height and then set the image height to 100% - don't state a width - the width will then be proportional to the height (that's what you want, right?). Alternatively, just set the image height, and leave the width unstated - again, the width will be proportional.