[html] 如何让img自动适应div容器大小？
生活随笔
收集整理的這篇文章主要介紹了
[html] 如何让img自动适应div容器大小？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[html] 如何讓img自動適應div容器大小？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.img-wrap {height: 200px;width: 200px;outline: 1px solid #66f;}.img-wrap img {width: 100%;height: 100%;object-fit: scale-down;}</style> </head> <body><div class="img-wrap"><img src="https://github.com/wind8866/storage/blob/master/img/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E7%9F%A5%E8%AF%86.png?raw=true" alt=""></div> </body> </html>object-fitcontain: 保持比例，內容被縮放，長的一邊與容器相同fill: 不保持比例，默認值cover: 保持比例，長邊會被裁剪none: 圖片大小不變，顯示中間部分scale-down: 保持原有尺寸比例，none與contain的一個。取決于哪個使圖片面積更小個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
總結
以上是生活随笔為你收集整理的[html] 如何让img自动适应div容器大小？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H264视频编码原理
- 下一篇： [jQuery] 你知道自定义事件吗？j