我如何创建一个全宽幻灯片,以保持其高度与宽度成正比?
所以我有我的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循环中,一旦开始缩放窗口,就无法重新设置宽度和高度。
非常感谢任何帮助 - 我愿意使用其他幻灯片插件或解决方案。
非常感谢
答案 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”屏幕相应地调整大小。
我发现这比试图获得一个“即时”解决方案要好得多,它可以像超大尺寸一样重新调整它(超大尺寸的IS非常适合背景图像)
答案 1 :(得分:0)
或许jquery-supersized更适合您要做的事情。