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

[virgin7 ()]

大家晚安

對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
推 iamnodoubt: 假如你只是要做淡出淡入的話,圖片其中一個div不要設成
→ iamnodoubt: 絕對定位,讓母元素被撐開高度,假如一定用position
→ iamnodoubt: absolute去寫的話,母元素高度只能用js動態運算,多想想
推 lovehoward: 固定長寬比可以嗎？ 參考這裡：http://stackoverflow.
→ lovehoward: com/questions/1495407/maintain-the-aspect-ratio-of
→ lovehoward: -a-div-with-css