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

时间:2011-03-22 10:12:32

标签: jquery html css jquery-plugins jquery-cycle

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

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

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

非常感谢

2 个答案:

答案 0 :(得分: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”屏幕相应地调整大小。

Scaling slideshow example

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

答案 1 :(得分:0)

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