當前位置：
首頁 >
img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...
發布時間：2024/1/18
28
豆豆
生活随笔
收集整理的這篇文章主要介紹了
img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
將圖像的最大寬度設置為100％ . 高度應設置為自動 .
Solution 1 ：當圖像長到其父div的寬度時：
.wrapper {
width: 500px;
height: 500px;
border: 1px solid red;
position: absolute;
}
.wrapper img {
/*width:100%;*/
height: auto;
max-width: 100%;
}
Solution 2 ：最初圖像寬度將受max-width屬性的限制，以保持在縮略圖大小范圍內 .
單擊圖像，刪除縮略圖類，以便它自然地使父級流動到其原始大小
.wrapper {
width: 100px;
height: 100px;
border: 1px solid red;
/*position: absolute;*/
}
.wrapper img.thumbnail {
/*width:100%;*/
height: auto;
max-width: 100%;
}
Initially
On click
總結
以上是生活随笔為你收集整理的img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css div上下左右排序
- 下一篇： PyQt缩放技巧，保留原图纵横比