課程
/前端開發(fā)
/JavaScript
/焦點圖輪播特效
如果每張圖片的寬度要占滿瀏覽器，也就是設(shè)置的父容器寬度為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的格式
這是我在做百分比布局時的一點心得
上述是假設(shè)你放置五張圖片時，為了讓每一張都百分之百顯示出來所以box的寬度設(shè)為500%
由于繼承，但每一張的img由于500%的20%，剛好是100%，這樣圖片就可以完全顯示出來
舉報
通過本教程學(xué)習(xí)您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答輪播圖片寬度為100%，應(yīng)該怎么計算寬度
1 回答圖片自適應(yīng)100%寬度
1 回答如果要求圖片寬度是等寬于用戶可視窗口該怎么做？
2 回答想要圖片滿屏的效果要怎么做呢？比如圖片長1340，寬350，怎么設(shè)置？？？
3 回答圖片寬度是按比例百分之幾，怎么設(shè)置每次的left值
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
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的格式
這是我在做百分比布局時的一點心得
上述是假設(shè)你放置五張圖片時，為了讓每一張都百分之百顯示出來所以box的寬度設(shè)為500%
由于繼承，但每一張的img由于500%的20%，剛好是100%，這樣圖片就可以完全顯示出來