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;
}

- user2003926

---

你的标记对我来说似乎很好用（http://jsfiddle.net/3WPm2/2/）。你确定你的图片不是都有相同的宽高比吗？ - Dan-Nolan

被接受的答案对我没用，但这个链接很有帮助 https://stackoverflow.com/questions/40428690/image-with-fixed-height-width-auto-and-keep-ratio - frederj

Answer 1

获取比例尺寸的两种方法。一种是将容器（在您的情况下是ul）设置为固定高度，然后将图像高度设置为100％ - 不要指定宽度 - 宽度将与高度成比例（这是您想要的，对吗？）。或者，只需设置图像高度，不声明宽度 - 再次，宽度将保持成比例。

- Charles Wyke-Smith