1：1的縱橫列，其他收縮/成長

的圖像是正方形，並且必須總是容器的整個高度（和寬度）。內容是可變高度，應該垂直居中。

到目前爲止，我試過使用flexbox，但是雖然我可以將圖像設置爲全高，但我無法使其符合寬度。它結束了看起來像這樣：

也許使用display: table可能會更好，但我一直沒能找到任何好的文檔。有什麼建議麼？

.container { 
 
    border: 2px solid red; 
 
    width: 60%; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.container > * { 
 
    border: 2px solid blue; 
 
} 
 

 
.container .avatar img { 
 
    height: 100%; 
 
} 
 

 
.container .avatar { 
 
    
 
} 
 

 
.container .content { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.container .content p { 
 
    margin-bottom: 100px; 
 
}

<div class="container"> 
 
    <div class="avatar"> 
 
     <img src="https://placehold.it/100x100">  
 
    </div> 
 
    <div class="content"> 
 
     <p>Some text balh blah 
 
    </div> 
 
</div>

來源

2017-09-07 Benedict Lewis

這樣的事情？ https://jsfiddle.net/cakexcrx/或者這個https://jsfiddle.net/cakexcrx/1/？ –

-1

100％的寬度添加到圖像在盒適當地配合

.container .avatar img { 
    height: 100%; 
    width:100%; 
}

和

.container .content p { 
    //margin-bottom: 100px; 
} 

.container .content { 
    line-height:100%; 
}

link

來源

2017-09-07 15:52:10 Znaneswar

這不會保持1：1的比例，它會擠壓正方形以適應列寬 –

您的意思是您需要相同比例的內容和圖像？ – Znaneswar

圖像需要具有相同的寬度和高度。設置'width：100％'將使它適合父列寬度，這與它的高度 –

我設法解決這個問題，使用在codepen上找到的技巧（不幸的是，我還沒有源代碼鏈接，或者鏈接了更多信息）。可以使用:after固定在你想要保留的色譜柱上1：1：

.container .avatar:before { 
    content: ""; 
    position: relative; 
    padding-top: 100%; 
}

來源

2017-09-08 21:25:31

1：1的縱橫列，其他收縮/成長

回答

相關問題