使用CSS的图像拼接

Question

我正在试图弄清楚如何实现这一目标，但它让我做噩梦。我希望显示一组图像，每行3个用于桌面分辨率。高度相同但宽度不同，并在调整大小时保持图像比例。问题是，当改变3个图像的宽度（每个图像的宽度不同）时，它不会做任何事情。我将非常感谢你的帮助。我的容器中有这个代码：

.responsive {
padding: 0 6px;
float: left;
width: 33.3333333%;
box-sizing: border-box;
}

div.img img {
position: relative;
width: 100%;
height: auto;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

<div class="responsive">   
<div class="img"> <a href="#">
<img src="images/work/thumbnail1.jpg" alt="" width="600" height="400"></a>     
</div>

<div class="responsive">   
<div class="img"> <a href="#">
<img src="images/work/thumbnail1.jpg" alt="" width="600" height="400"></a>     
</div>

这是CSS：

.responsive {
padding: 0 6px;
float: left;
width: 33.3333333%;
box-sizing: border-box;
}

div.img img {
position: relative;
width: 100%;
height: auto;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}