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%——不要声明宽度——然后宽度将与高度成比例(这就是您想要的，对吧？)。或者，只需设置图像高度，不指定宽度 - 同样，宽度将成比例。