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

Question

我想创建以下布局：

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

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

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

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

我制作了一张图表，可能更好地解释了我想要实现的目标：

我希望图像集合100％宽度的父元素，在同一高度缩放而不会失去它们的比例。

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

所以这就是我到目前为止所做的：

Strike＃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 answer，其中我提出了有关创建幻灯片的建议。它引用了一个复杂的Codepen示例。您可以轻松地剥离/添加您需要的内容......

Answer 2

所以我想出的一个技巧是使用图像的自动缩放来缩放包含的幻灯片div，但是用不透明度隐藏它（在一个真实的例子中，我使用透明的.png也是如此）。这设置了胶片相对于其宽度的高度。如果您希望自己的幻灯片是5：4或16：9或其他，只需更改.magic图片的比例。

然后将内部容器设置为绝对定位，以便继承.magic图像的大小。

图像本身被设置为占据幻灯片的整个高度，并且被赋予不同的宽度。实际图片使用background-image设置，background-size: cover和background-position: center填充div。

＆＃13;

＆＃13;

.filmstrip {
    width: 100%;
    position: relative;
    
    /* just to make it easier to see what's going on */
    border: 1px solid red;
}
.magic {
    width: 100%;
    height: auto;
    display: block;
  
    /* we don't actually want to see this, we're just using it for it's ratio */
    opacity: 0;
}
.contents {
    position: absolute;
    top:  0; bottom: 0;
    left: 0; right:  0;
}
.contents .image {
    height: 100%;
    background-size: cover;
    background-position: center;
    float: left;
    margin-right: 2%;
    
    /* just to make it easier to see what's going on */
    border: 1px solid blue;
    box-sizing: border-box;
}
.contents .wide {
    width: 30%;
}
.contents .narrow {
     width: 10%
}

＆＃13;

<div class="filmstrip">
    <img class="magic" src="http://placehold.it/400x100" />
    <div class="contents">
        <div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
        <div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
        <div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

浏览器支持应该是：Chrome 3 +，Firefox 3.6 +，IE 9 +，Opera 10 +，Safari 4.1 + ，这主要是因为使用background-cover。