Html 图片无法使用百分比正确对齐

我一直在尝试使用高度百分比对齐一些图片

HTML:

---

正如你所看到的，我使用213px作为高度，使左边的图像在左边对齐。但是如果我使用的是百分比，则图像只是相互覆盖（就像一个堆栈）。有没有办法解决这个问题？因为如果我使用像素，有时图片会在不同的屏幕大小下失真

您需要增加工作拇指id的高度，或者需要减少所需图像的大小，并为拇指添加左边距和底部边距。 我认为下面的代码将帮助您#工作#拇指{宽度：20%；高度：50%；左侧边距：10px；底部边距：10px；浮动：左侧；显示：内联；}

为第一行创建一个div（类似于outer的类），类似于为第二行创建div，以便第一行包含4个图像，第二行也包含4个图像，依此类推。。

---

这将为每行的第一个图像设置左边距0，其余的图像看起来会很好

你能得到一个JSFiddle up吗请=）让我们更容易！确定@bezzoon图像应该垂直对齐吗？因为它们在小提琴中是水平对齐的！抱歉，这是正确的链接@bezzoon，该链接看起来也很完美；c有什么问题？

<div class="work">

   <div class="work_container" id="work_thumb" ontouchstart="this.classList.toggle('hover');">

      <div class="front">
         <a href="#"><img src="images/dummy1-01.png" border="0"></a>    
      </div>

      <div class="back">
         <a href="#"><img src="images/dummy2-01.png" border="0"></a>
      </div>

   </div>

</div>

.work {
width: 84%;
height: 100%;
left: 8%;
position: absolute; 
}

.work_container{
position: relative;
top: 0;
left: 0;
-webkit-perspective: 10000;
-moz-perspective: 10000;
-o-perspective: 10000;
}

#work_thumb {
width: 20%;
height: 213px;
float: left;
display: inline;
-moz-transform: perspective(10000px);
-moz-transform-style: preserve-3d;
}

#work_thumb img{
width: 100%;
}