我在一個 div 中有三張圖片，其中一張的高度比其他的高。我可以“告訴”所有影像的高度不超過它們所在 div 的 50%/70%，那么，具有較大高度的影像會相應地改變嗎？
<div class="images">
<img src="https://images-us.bookshop.org/ingram/9781640094765.jpg?height=500&v=v2" alt="a book">
<img src="https://images-us.bookshop.org/ingram/9781565842632.jpg?height=500&v=v2" alt="a book">
<img src="https://images-us.bookshop.org/ingram/9780805050271.jpg?height=500&v=v2" alt="a book">
</div>
css
.images {
display: flex;
justify-content: space-around;
align-items:flex-end;
border: 5px solid blue;
}
.images img {
max-height: 50%;
}
uj5u.com熱心網友回復：
您必須向容器添加高度，以便在子元素上使用具有 max-height 的 percantages。容器子元素上沒有高度不知道從什么計算高度，因為容器高度正在采用子元素。
所以這樣的事情可以解決你的問題：
.images {
display: flex;
justify-content: space-around;
align-items:flex-end;
border: 5px solid blue;
height: 500px;
}
.images img {
max-height: 50%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405432.html
標籤：
上一篇：為什么影像不適合頁面螢屏尺寸？