CSS：flexbox 圖像：限制高度，不溢出其他內容，但最大化大小，並保持縱橫比

Question

Flexbox 很好。 但有一個問題困擾着我。
flexbox 可以處理任意縱橫比的圖像嗎？

我想限制 flexbox 的高度，不要因為圖像太大而導致內容溢出，但仍然嘗試最大化圖像，同時保持縱橫比。
這可能嗎？ 還是有更好的方法來做到這一點？

如果我太挑剔，請糾正我。 也許我們在設計 web 頁面時不必考慮任意縱橫比？ 同時處理寬幅圖像和長幅圖像？

這是一個例子：

 html, body { height: 100%; } body, p { margin: 0; } main { display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }.row { display: flex; max-height: 25%; border: 1px solid red; }.img_wrapper { display: flex; align-items: center; justify-content: center; }.img_wrapper > img { max-height: 100%; max-width: 100%; }.info { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; }

 <main> <div class="row"> <div class="img_wrapper"> <img src="https://via.placeholder.com/50x50.png"> </div> <div class="info"> <b>Title</b> <p>More info</p> </div> </div> <div class="row"> <div class="img_wrapper"> <img src="https://via.placeholder.com/3000x600.png"> </div> <div class="info"> <b>Title</b> <p>More info</p> </div> </div> <div class="row"> <div class="img_wrapper"> <img src="https://via.placeholder.com/600x1800.png"> </div> <div class="info"> <b>Title</b> <p>More info</p> </div> </div> </main>

這是上面html+css的結果：

我試圖消除文字和圖像之間的那些空白，即“推”圖像和那些文字到最左邊。

這就是我要的：

1. 由於高度限制而收縮：所有三行都限制在一定的高度。
2. 由於寬度限制而收縮：當圖像非常“寬”時，如第二張，內容不會溢出。 當圖像的寬度太大時，它應該縮小並使高度小於限制。
3. 但是，我仍然希望圖像盡可能大。
4. 保留縱橫比。

當圖像是方形的或不是非常極端時，這已經可以很好地工作了。 任何想法？
對不起，我沒有清楚地描述這個問題。

這是@ates_irem 的回答：

Answer 1

我想我這次做到了:) 我在.row class 中安排了行的高度。 然后為了制作justify-content:flex-start我處理自動居中圖像和文本的問題。 我想這會對你有所幫助:)

html, body {
    height: 100%;
}
body, p {
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.row {
    display: flex;
    width:100%;
    border: 1px solid red;
    flex:0 0 100%;
    max-height:100px;
    
}
.img_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    
    height:100px;
}
.img_wrapper > img {
    max-width: 100%;
    height:100%;
    object-fit:cover;
}
.info {
    display: flex;
    flex-direction: column;
    align-self:center;
    justify-content: flex-start; 
    width:100%;
    margin-left:20px;
}

Answer 2

我可能不太清楚你的問題，因為我是這個行業的新手。 但是我寫了這行代碼，它保存了圖像的縱橫比。

html, body {
    height: 100%;
}
body, p {
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.row {
    display: flex;
    width:100%;
    border: 1px solid red;
    
}
.img_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;    
    width:40%;
    height:auto;
}
.img_wrapper > img {
    max-width: 100%;
    height:auto;
    object-fit:cover;
}
.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
}