Jquery - 100％宽度的幻灯片，同时保持高度propotional

我将如何去创建一个全宽度的幻灯片，其高度与宽度成正比？Jquery - 100％宽度的幻灯片，同时保持高度propotional

所以，我有我的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循环中，一旦你开始缩放窗口，它不能重写宽度和高度。

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

非常感谢

来源

2011-03-22 jamie

大多数jQuery幻灯片应该与媒体属性兼容，以便为不同尺寸的屏幕引用不同的样式表。

<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

我发现这不是试图得到一个“对飞”的解决方案，重新调整它像超大型好得多（超大型是伟大的背景图像虽然）

来源

2012-05-09 23:57:54 Rockafella

该链接中的幻灯片不适合我。但这个女孩很好。 – JakeParis 2012-05-10 00:00:08

你使用什么浏览器？ - 此外，在13“屏幕上设置的最小尺寸，所以更小，你不会看到缩放。 – Rockafella 2012-05-10 16:04:15

也许jquery-supersized更适合你正在尝试做的。

来源

2011-03-22 10:18:53

这是我最初的想法 - 但我遇到的这个问题是试图在幻灯片放映下面放置内容，其中图片的高度取决于浏览器的宽度，内容永远不会正确。 – jamie 2011-03-22 13:47:29

Jquery - 100％宽度的幻灯片，同时保持高度propotional

回答

相关问题