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 回答