課程
/前端開發(fā)
/JavaScript
/JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果
crtl-i里的圖片始終繼承不了它的寬度高度
2015-07-09
源自:JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果 2-1
正在回答
對(duì)于絕對(duì)定位的子無素,要是其外層的所有元素中都沒有用position:relative,則width:100%是基于body,否則就是離基最近的一個(gè)position:relative的元素。
所以只要給ctrl-i 加一個(gè)position:relative 就可以了。
?<div class="ctrl">
? ? ? ? <li> <a class="ctrl-i" href="#"><img src="imgs/1.jpg" /> </a></li> ??
? ? </div>
.ctrl-i{ display:inline-block; width:150px; height:13px; background-color:#666; box-shadow:0 1px 1px ?rgba{0,0,0,0.3); position:relative;}
.ctrl-i img{width:100%; position:absolute; left:0; bottom:13px; z-index:1;}
就是這個(gè)小圖始終高度是原圖片高度
求代碼
hznn 提問者
舉報(bào)
同樣的幻燈片,不一樣的切換,學(xué)會(huì)實(shí)現(xiàn)思路,操作很簡(jiǎn)單
3 回答.slider .main .main-i 設(shè)置 absolute 就不見了,沒高度和寬度~
3 回答圖片垂直居中時(shí),獲取到的圖片高度大于圖片的實(shí)際高度
3 回答ctrl-i中img的寬度問題
1 回答圖片的clientHeight始終為0
1 回答和老師一樣的,clientHeight獲取圖片可視高度,為什么獲取到的是整張的高度,效果就成這樣了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-02-26
對(duì)于絕對(duì)定位的子無素,要是其外層的所有元素中都沒有用position:relative,則width:100%是基于body,否則就是離基最近的一個(gè)position:relative的元素。
所以只要給ctrl-i 加一個(gè)position:relative 就可以了。
2015-07-14
?<div class="ctrl">
? ? ? ? <li> <a class="ctrl-i" href="#"><img src="imgs/1.jpg" /> </a></li> ??
? ? </div>
.ctrl-i{ display:inline-block; width:150px; height:13px; background-color:#666; box-shadow:0 1px 1px ?rgba{0,0,0,0.3); position:relative;}
.ctrl-i img{width:100%; position:absolute; left:0; bottom:13px; z-index:1;}
就是這個(gè)小圖始終高度是原圖片高度
2015-07-10
求代碼