我有一种幻灯片放映,它是使用jQuery触发的,并在ul中循环浏览图像。图像使用CSS进行样式设置,以使其完全重叠,并且它们可以随意淡入和淡出。
问题
作为响应式设计的一部分,我给每个图像设置了100%的最大宽度,并且ul设置为静态高度,但是当然,图像的高度取决于屏幕尺寸。
解
可以在加载图像后使用jQuery检查图像的大小,并相应地调整ul的大小-但这会导致在加载图像时出现令人讨厌的闪烁。
有CSS解决方案吗?
通过此jsFiddle进行了很多解释:http://jsfiddle.net/eddturtle/vvsDh/1/
最佳答案
您可以通过使用背景图像来提出一些建议,因为CSS3具有可以设置为“ cover”的“ background-size”属性。 Here's the doc。
我可能要做的是隐藏图像列表,而是为每个过渡创建一个图像保持器,并将其设置为CSS background属性。让这个新的Holder淡入,并使用fadeIn函数的回调从DOM中删除以前的Holder。如果您需要,我可能会为您编辑小提琴并使其运行。
编辑***
在这里,伙计。这应该完全按照您的需要工作。现在,背景图像已设置为覆盖,这将确保图像覆盖整个区域。如果要确保显示整个图像并且比例受到限制,请使用“包含”。您所需要做的就是将父#slideshow高度调整为所需的高度。
http://jsfiddle.net/vvsDh/5/
关于jquery - <ul>的高度,具有绝对定位(在响应设计中),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12924657/