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

Question

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

这主要是通过框架kube.css（https://imperavi.com/kube/）完成的。在这些箱子里，每箱有一个图像。我希望图像/方块垂直对齐，其布局如下： 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; 
}