課程
/前端開發
/JavaScript
/焦點圖輪播特效
那要是想讓圖片自適應100%寬度呢
2017-12-21
源自：焦點圖輪播特效 2-1
正在回答
width:100%;意思是讓圖片占據父容器100%，這里面圖片假設比父容器大，倒是不會影響，如果比父容器小，圖片會模糊，假設圖片比例與父容器比例相差比較大，設置：height:100%圖片是會發生變形的。假設把圖片設定為背景圖片，需要background-size：100% 100%;前面一個是寬度100%，后面一個是高度100%。
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答輪播圖片寬度為100%，應該怎么計算寬度
1 回答如果每張圖片的寬度要占滿瀏覽器，也就是設置的父容器寬度為100%，圖片寬度也為100%該怎么做
1 回答如何使幻燈圖片自適應手機
2 回答圖片寬度為1600px 怎么全屏自動輪播呢
3 回答圖片超過list寬度咋辦？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-12-23
width:100%;意思是讓圖片占據父容器100%，這里面圖片假設比父容器大，倒是不會影響，如果比父容器小，圖片會模糊，假設圖片比例與父容器比例相差比較大，設置：height:100%圖片是會發生變形的。假設把圖片設定為背景圖片，需要background-size：100% 100%;前面一個是寬度100%，后面一個是高度100%。