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