css - 将 2 个图像调整为与具有定义高度的列相同的宽度

Question

有 2 张不同宽度和高度的图像。是否可以使用 CSS 创建一个列，其中两个图像(一个在另一个上方)适合 100% 的列高，并使图像以相同的宽度显示？到目前为止，我正在使用服务器端方程来确定容器 div 的理想宽度，并对图像使用宽度 100%，但我更喜欢 100% css 的解决方案来节省服务器处理。

这是我的 fiddle :fiddleCSS:

#container { height: 300px; background-color: black; overflow: hidden; }
#container .col { float: left; font-size: 0; }
#container .col img { width: 100%; }

html:

 <div id="container">
    <div class="col" style="width:174px">
    <img src="http://acasa.org.br/ensaio/grande/380.JPG">
    <img src="http://www.acasa.org.br/midia/thumb/MF-00002.jpg">
    </div>
    </div>

Answer 1

你是说这样？

CSS

#container {
  height: 300px;
  background-color: black;
}
#container .col {
  width: 174px;
  background: red;
  float:left;
}
#container .col img {
  width: 174px;
  max-width: 100%;
  display: block;
}

FIDDLE