Question

我如何创建一个全宽幻灯片，以保持其高度与宽度成正比？

所以我有我的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循环中，一旦开始缩放窗口，就无法重新设置宽度和高度。

非常感谢任何帮助 - 我愿意使用其他幻灯片插件或解决方案。

非常感谢

Answer 1

大多数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”屏幕相应地调整大小。

Scaling slideshow example

我发现这比试图获得一个“即时”解决方案要好得多，它可以像超大尺寸一样重新调整它（超大尺寸的IS非常适合背景图像）

Answer 2

或许jquery-supersized更适合您要做的事情。

Jquery - 100％宽度幻灯片放映，同时保持高度成比例

2 个答案: