CSS图像固定高度动态宽度

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

1 个解决方案

#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.

两种获得比例尺寸的方法。将容器(在您的情况下为ul)设置为固定高度,然后将图像高度设置为100% - 不要说明宽度 - 然后宽度将与高度成正比(这就是您想要的,对吗?)。或者,只需设置图像高度,并保持宽度不变 - 再次,宽度将成比例。