模拟图像的块{宽度:100%; height:auto}行为

Question

我想创建以下布局:

是具有不同宽度和高度的可变数量图像的条带,即:

• 成比例的
• 缩放在同一高度;
• 并且它们的宽度之和等于父宽度.

***表达自己有点复杂;

我想知道img当你将宽度设置为百分比并且它auto神奇地计算它的高度时,块是否可以模拟整齐的比例行为.

我编写了一个图表,可能更好地解释了我想要实现的目标:

我希望图像集合100%宽度的父元素,在相同的高度缩放而不会失去它们的比例.

我已经尝试了各种实现,试图找出一种方法,我可以在css中转换计算百分比高度,填充块的所有宽度,以及图像在有{width: 100%; height : auto}属性时的行为方式.

所以这就是我到目前为止所得到的:

罢工#1,尝试了一个简单的解决方案

问题:必须预定义容器高度.

.container {
 width : 100%;
 border: 1px solid black;
 height: 50px; /* I would like to say here auto */
}

.image-wrapper {
  
  white-space: nowrap;
  height: 100%; 
  max-width: 100%;
  border: 1px dashed gray;
}

.image {
  height: 100%;
  width: auto;
}

<div class="container">
  <div class="image-wrapper">
    <img class="image" src="http://placehold.it/100x200" />
    <img class="image" src="http://placehold.it/300x200" />
    <img class="image" src="http://placehold.it/800x400" />
    <img class="image" src="http://placehold.it/10x80" />
    <img class="image" src="http://placehold.it/800x400" />
  </div>
</div>

罢工#2,显示:表有人吗？

问题:甚至不需要提及它,图像被裁剪,容器大小不遵循其父级大小.

.container-wrapper {
  width: 40px;
  height: 50px;
}

.container {
 width : 100%;
 border: 1px solid black;
 display: table;
 height: 100%;
}

.image-wrapper {
  display: table-row;
  height: 100%; 
  border: 1px dashed gray;
}

.item {
  display: table-cell;
  border: 1px solid blue;
  width: 100%;
  height: auto;
}


.image {
  height: 100%;
  width: auto;
}

<div class="container-wrapper">
  <div class="container">
    <div class="image-wrapper">
      <div class="item">
        <img class="image" src="http://placehold.it/100x200" />
        </div>
      <div class="item">
        <img class="image" src="http://placehold.it/300x200" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/800x400" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/10x80" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/800x400" />
      </div>
    </div>
  </div>
</div>

***我必须说我正在寻找一个没有JavaScript代码参与的HTML/CSS解决方案.

你有什么方法可以解决这个问题吗？

Answer 1

看看我的stackoverflow 33117027 答案，其中我提出了有关创建幻灯片的建议。它引用了一个详细的 Codepen 示例。您可以轻松地删除/添加您需要的内容...