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％ - 不要说明宽度 - 宽度将与高度成正比（这就是您想要的，对吗？）。或者，只需设置图像高度，并保持宽度不变 - 再次，宽度将成比例。