靈活的包裝內的圖像的靜態高度

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; 
}