[问题] 如何把这个改成RWD?

楼主: virgin7   2016-12-03 01:10:59
大家晚安
对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/
作者: iamnodoubt (Have Fun)   2016-12-03 02:11:00
假如你只是要做淡出淡入的话,图片其中一个div不要设成绝对定位,让母元素被撑开高度,假如一定用positionabsolute去写的话,母元素高度只能用js动态运算,多想想
作者: lovehoward (LOVE&PEACE)   2016-12-03 10:40:00
固定长宽比可以吗? 参考这里:http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

Links booklink

Contact Us: admin [ a t ] ucptt.com