課程
/前端開發
/JavaScript
/焦點圖輪播特效
如果每張圖片的寬度要占滿瀏覽器，也就是設置的父容器寬度為100%，圖片寬度也為100%該怎么做
2018-06-12
源自：焦點圖輪播特效 2-1
正在回答
舉個列子
#banner{
width: 100%;
height: 460px;
position: relative;
overflow: hidden;
}父容器
#box{
width: 500%;
position: absolute;
z-index: 1;
}放置圖片的div
#box img{
width: 20%;
float: left;
cursor: pointer;
} img的格式
這是我在做百分比布局時的一點心得
上述是假設你放置五張圖片時，為了讓每一張都百分之百顯示出來所以box的寬度設為500%
由于繼承，但每一張的img由于500%的20%，剛好是100%，這樣圖片就可以完全顯示出來
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答輪播圖片寬度為100%，應該怎么計算寬度
1 回答圖片自適應100%寬度
1 回答如果要求圖片寬度是等寬于用戶可視窗口該怎么做？
2 回答想要圖片滿屏的效果要怎么做呢？比如圖片長1340，寬350，怎么設置？？？
3 回答圖片寬度是按比例百分之幾，怎么設置每次的left值
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-06-14
舉個列子
#banner{
width: 100%;
height: 460px;
position: relative;
overflow: hidden;
}父容器
#box{
width: 500%;
height: 460px;
position: absolute;
z-index: 1;
}放置圖片的div
#box img{
height: 460px;
width: 20%;
float: left;
cursor: pointer;
} img的格式
這是我在做百分比布局時的一點心得
上述是假設你放置五張圖片時，為了讓每一張都百分之百顯示出來所以box的寬度設為500%
由于繼承，但每一張的img由于500%的20%，剛好是100%，這樣圖片就可以完全顯示出來