[問題] 如何把這個改成RWD?

看板Web_Design作者時間8年前 (2016/12/03 01:11), 編輯推噓2(204)
留言6則, 2人參與, 最新討論串1/2 (看更多)
大家晚安 對RWD一直有個疑問,請看這個範例:https://jsfiddle.net/t79o7rqy/ 一個簡單的幻燈片效果,如果要改成RWD 例如把 #slideshow 固定寬高改成 width: 50%; height: auto; 問題來了: 1.#slideshow高度設成auto或不設高度,會因為裡頭div設了絕對定位而變成高度為零 就看不到任何圖片了!如果設一個固定高度,RWD的寬度變動時高度卻固定  效果就不對(不懂意思可以拉動視窗試試) 2.要如何在幻燈片寬高自動變動下,底下的"內容內容內容"文字能貼著幻燈片區塊  因為slide中的圖片都用絕對定位  那底下的"內容內容"就會往上跑而不能貼著幻燈片下方了 以上,感謝前輩們指導,其實類似問題常出現,希望能知道怎麼做才好,感思~ 範例出處: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/ -- -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.13.96.176 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1480698665.A.B5E.html

12/03 02:11, , 1F
假如你只是要做淡出淡入的話,圖片其中一個div不要設成
12/03 02:11, 1F

12/03 02:12, , 2F
絕對定位,讓母元素被撐開高度,假如一定用position
12/03 02:12, 2F

12/03 02:14, , 3F
absolute去寫的話,母元素高度只能用js動態運算,多想想
12/03 02:14, 3F

12/03 10:40, , 4F
固定長寬比可以嗎? 參考這裡:http://stackoverflow.
12/03 10:40, 4F

12/03 10:40, , 5F
com/questions/1495407/maintain-the-aspect-ratio-of
12/03 10:40, 5F

12/03 10:40, , 6F
-a-div-with-css
12/03 10:40, 6F
文章代碼(AID): #1OGQifjU (Web_Design)
討論串 (同標題文章)
文章代碼(AID): #1OGQifjU (Web_Design)