這是我的布局。所需的行為是，當(dāng)我垂直調(diào)整窗口大小時(shí)，圖像會(huì)縮放并保持原始寬高比。我的代碼在除 Safari 之外的所有瀏覽器中都運(yùn)行良好（您可以通過(guò)在不同瀏覽器中嘗試該代碼片段來(lái)看到它）。你有解決方案嗎？謝謝 ;）.wrap-container{ width: 100%; display: flex; justify-content: center; background-color: yellow; height: 55vh;}.wrap{ width: 700px; background-color: aqua; display: flex; justify-content: flex-start; align-items: flex-end; padding-top: 64px;}.wrap img{ height: 100%; width: auto; max-width: 300px; max-height: 300px;}<div class="wrap-container"> <div class="wrap"> <img src="https://via.placeholder.com/300"/> </div></div>
1 回答
泛舟湖上清波郎朗
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊
添加flex: 0;到圖像上
.wrap-container{
width: 100%;
display: flex;
justify-content: center;
background-color: yellow;
height: 55vh;
}
.wrap{
width: 700px;
background-color: aqua;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-top: 64px;
}
.wrap img{
height: 100%;
width: auto;
flex: 0;
max-width: 300px;
max-height: 300px;
}
<div class="wrap-container">
<div class="wrap">
<img src="https://via.placeholder.com/300"/>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 338 瀏覽
添加回答
舉報(bào)
0/150
提交
取消