Question

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

这是我的小提琴：fiddle 的CSS：

#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

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

1 个答案: