CSS響應flex寬度，固定邊距，但高度自動匹配圖像內容的高度

我想有3個div流暢地響應（規模寬度和高度保持相同的比例）到瀏覽器寬度。我的大部分圖像都是垂直的，所以我創建爲overflow: hidden的原因是因爲我不介意爲很長的圖像隱藏部分圖像 - 例如想想網站的截圖！CSS響應flex寬度，固定邊距，但高度自動匹配圖像內容的高度

但是在某些情況下，一些圖像更短，所以在這種情況下該怎麼做？也許使用JS？

這是我的代碼：https://codepen.io/anon/pen/wrygJE

.flex1 { 
 
    display: flex; 
 
} 
 

 
body { 
 
    background-color: #ccc; 
 
} 
 

 
.archives .imageContainer { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-bottom: 70vw; 
 
    height: 0; 
 
    margin: 30px 0; 
 
    margin-bottom: 40px; 
 
    overflow: hidden; 
 
    border: 10px solid #fff; 
 
} 
 

 
.archives { 
 
    padding: 30px 30px 40px 30px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    font-size: 0; 
 
    position: relative; 
 
} 
 

 
.archives img { 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
.archives .imageContainer.half.medium { 
 
    width: calc(30% - 15px); 
 
    width: -moz- width:calc(30% - 15px); 
 
    width: -webkit- width:calc(30% - 15px); 
 
    width: -o- width:calc(30% - 15px); 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    flex-grow: 3; 
 
} 
 

 
.archives .imageContainer.half.small { 
 
    width: calc(15% - 15px); 
 
    width: -moz- width:calc(15% - 15px); 
 
    width: -webkit- width:calc(15% - 15px); 
 
    width: -o- width:calc(15% - 15px); 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    flex-grow: 3; 
 
}

<div class="archives"> 
 
    <div class="flex1"> 
 
    <div id="thumb75" class="imageContainer "> 
 
     <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg"> 
 
    </div> 
 
    <div id="thumb76" class="imageContainer half medium"> 
 
     <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg"> 
 
    </div> 
 
    <div id="thumb77" class="imageContainer half small"> 
 
     <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-06 Francesco

不上你的目標完全清楚。像這樣？ https://codepen.io/anon/pen/KXQajw –

顯示預期輸出的圖像會很好 – LGSon

我更新了我的codepen使用不同的圖像... – Francesco

在柔性容器的初始設置是align-items: stretch。這意味着彈性物品將沿着橫軸擴展以覆蓋容器的全部可用長度。

如果您覆蓋該默認值，Flex項目將關閉與內容的差距。試試這個：

.flex1 { 
    display: flex; 
    align-items: flex-start; 
}

而且，從Flex項目中刪除任何定義的高度，因爲他們將覆蓋align-items。

revised codepen

來源

2017-10-06 17:12:37

您的代碼的問題是，它沒有最大 - 高度在我的要求/例如 – Francesco

就像我在我的第一個評論中寫道的，你的問題並不完全清楚。例如，問題中的「max-height」要求在哪裏？也許它在你的演示中是隱含的，但它並沒有給予太多關注。 –

CSS響應flex寬度，固定邊距，但高度自動匹配圖像內容的高度

回答

相關問題