具有绝对定位的 <ul> 高度（在响应式设计中）答案

【问题标题】：Height of <ul> with absolute positioning (in a Responsive Design)具有绝对定位的 <ul> 高度（在响应式设计中）
【发布时间】：2012-10-17 08:28:11
【问题描述】：

我有一个幻灯片，它是使用 jQuery 触发的，并在 ul 中循环显示图像。图像使用 CSS 设置样式，以绝对定位为重叠，并且它们随意淡入和淡出。

问题

作为响应式设计的一部分，我为每张图片设置了 100% 的最大宽度，并为 ul 设置了静态高度，但图片的高度当然会根据屏幕尺寸而变化。

解决方案

可以在加载图像后使用 jQuery 检查图像的大小并相应地调整 ul 的大小 - 但这会在加载图像时导致令人讨厌的闪烁。

有 CSS 解决方案吗？

【问题讨论】：

【解决方案1】：

您可以通过使用背景图像来代替，因为 CSS3 有一个“背景大小”属性，您可以将其设置为“覆盖”。 Here's the doc.

我可能会做的是隐藏您的图像列表，而是为每个过渡创建一个图像持有者并设置它的 CSS 背景属性。让这个新的持有者淡入，并使用 fadeIn 函数的回调从 DOM 中删除以前的持有者。如果您需要我，我可能会为您编辑小提琴并运行此解决方案。

编辑***

来吧，伙计。这应该完全按照您的需要工作。就像现在一样，背景图像被设置为覆盖，这将确保图像填满整个区域。如果要确保显示整个图像并限制比例，请使用包含。您需要做的就是将父级#slideshow 高度调整到您需要的高度。

【讨论】：

这是我看到使用优雅的 CSS 解决方案完成的唯一方法。这可以通过使用 CSS3 的内置图像大小来为您省去麻烦，而不必在 javascript 中滚动您自己的大小。
我不明白如何在宽度变化时保持图像比例。你会如何定义 div 的高度？
这是我所能得到的背景大小的想法：jsfiddle.net/eddturtle/wpA8F/3 任何帮助将不胜感激:)
好吧，你要么需要一个静态高度，要么将父 div 设置为 100%。如果您使用静态高度，您可以使用 CSS3 媒体查询来随着屏幕尺寸变小而调整高度。这真的是你唯一的两个选择。
我需要休息一下吃晚饭，但除了反斜杠没有出现在 url 中之外，这是可行的。我在想需要做一些字符串操作和 URL 编码。完成后我会用小提琴更新答案。