灵活包装中图像的静态高度

Question

我有一个有3个盒子的容器，其高度和宽度都很灵活。第一个盒子占据容器宽度的60％和100％的高度。在10％的余量后，第二个和第三个盒子占据宽度的30％，并且每个盒子使用容器高度的45％。

这主要由框架kube.css（https://imperavi.com/kube/）完成。在这些盒子里，我每盒有1张图片。我希望图像/框垂直对齐，布局如下： https://codepen.io/daiaiai/pen/qXRvOy

由于背景图像不是一个真正的选项，我不知道如何使用按比例正确的缩放图像来做到这一点。

我试着用它来做但事情并不顺利：

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

我可以通过使用图像模板的正确尺寸来反过来解决它，但我不知道尺寸应该是哪个。

有人可以帮我解决这个问题吗？谢谢！

Answer 1

请试试这个

.index_quicklinks {
   margin-top: 8vh;
   display: flex;
   align-items: center;
}