Jquery - 100% 宽度幻灯片，同时保持高度成比例答案

【问题标题】：Jquery - 100% width slideshow whilst keeping the height propotionalJquery - 100% 宽度幻灯片，同时保持高度成比例
【发布时间】：2012-05-10 07:57:54
【问题描述】：

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

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

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

非常感谢

【问题讨论】：

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

【解决方案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

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

【讨论】：

该链接中的幻灯片不适合我。但是这个女孩很好。
您使用的是什么浏览器？ - 此外，设置的最小尺寸为 13 英寸屏幕，因此任何更小的您都不会看到缩放。

【解决方案2】：

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

【讨论】：

这是我最初的想法 - 但我遇到的这个问题是试图在幻灯片下方放置内容，其中图像的高度将取决于浏览器的宽度，内容永远不会坐对。