0

我将如何创建一个使其高度与宽度成比例的全宽幻灯片？

所以我有我的 css 来创建我的全宽图像，保持它的比例：

#featured-slideshow {
    width: 100%;
}
#featured-slideshow .slideshow {
    width: 100%;
}
#featured-slideshow .slideshow img {
    width: 100% !important;
    min-height: 300px;
    min-width: 892px;
}

标记是：

<div id="featured-slideshow">
    <div class="slideshow">
        <img src="images/slideshow/image-1.jpg" />
        <img src="images/slideshow/image-2.jpg" />
        <img src="images/slideshow/image-3.jpg" />
    </div>
</div>

我遇到的问题是，一旦我将 jquery 插件应用于此，例如 jquery 循环，一旦开始缩放窗口，它就无法重新计算宽度和高度。

任何帮助将不胜感激 - 我愿意使用其他幻灯片插件或解决方案。

非常感谢

4

2 回答 2

2

大多数 jquery 幻灯片应该与 media 属性兼容，以便为不同尺寸的屏幕引用不同的样式表。

<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1799px)" href="css/stylefifteen.css">

因此，为 13、15、21 和 27 尺寸的屏幕设置不同尺寸的幻灯片，并在每个样式表中确保幻灯片框架以及 img 类相应地调整大小。

可以在这里看到一个演示（非工作网站 - 仅用于此示例的参考） - 将屏幕拖动到不同的大小，幻灯片应该相应地从 13" 一直调整到 27" 屏幕。

缩放幻灯片示例

我发现这比尝试获得像超大尺寸一样重新缩放它的“即时”解决方案要好得多（尽管超大尺寸非常适合背景图像）

于 2012-05-09T23:57:54.577 回答
0

也许jquery-supersized更适合你想要做的事情。

于 2011-03-22T10:18:53.007 回答