課程
/前端開發
/JavaScript
/JS+CSS3實現帶預覽圖幻燈片效果
crtl-i里的圖片始終繼承不了它的寬度高度
2015-07-09
源自:JS+CSS3實現帶預覽圖幻燈片效果 2-1
正在回答
對于絕對定位的子無素,要是其外層的所有元素中都沒有用position:relative,則width:100%是基于body,否則就是離基最近的一個position:relative的元素。
所以只要給ctrl-i 加一個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;}
就是這個小圖始終高度是原圖片高度
求代碼
hznn 提問者
舉報
同樣的幻燈片,不一樣的切換,學會實現思路,操作很簡單
3 回答.slider .main .main-i 設置 absolute 就不見了,沒高度和寬度~
3 回答圖片垂直居中時,獲取到的圖片高度大于圖片的實際高度
3 回答ctrl-i中img的寬度問題
1 回答圖片的clientHeight始終為0
1 回答和老師一樣的,clientHeight獲取圖片可視高度,為什么獲取到的是整張的高度,效果就成這樣了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-02-26
對于絕對定位的子無素,要是其外層的所有元素中都沒有用position:relative,則width:100%是基于body,否則就是離基最近的一個position:relative的元素。
所以只要給ctrl-i 加一個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;}
就是這個小圖始終高度是原圖片高度
2015-07-10
求代碼