基础轨道滑块上的全宽图像答案

【问题标题】：Full width of images on foundation orbit slider基础轨道滑块上的全宽图像
【发布时间】：2013-07-01 10:50:22
【问题描述】：

我对轨道滑块图像的宽度有疑问。我的图像宽度为 1600 像素，但显示器的分辨率可以更高 - 例如 1680 像素。是否可以将图像的大小拉伸到屏幕的 100%（在本例中为 1680 像素）？

我的代码是标准的，看起来像这样：

<div id="featured">
<img src="11.jpg" alt="">
<img src="12.jpg" alt="">
<img src="13.jpg" alt="">
</div>

<script src="js/jquery.foundation.orbit.js"></script>

<script type="text/javascript">
   $(window).load(function() {
       $("#featured").orbit();
   });
</script>

感谢您的帮助。

阿德里安

【问题讨论】：

标签： javascript css workflow-foundation orbit

【解决方案1】：

只需在应该给你全宽度的行 div 之外编写轨道代码即可。在基础 4 中。

【讨论】：

您能否用一些工作示例进行解释以更好地说明？

【解决方案2】：

您可以使用var imgwidth = window.innerWidth 获取窗口的宽度。

使用$('image_selector').width = imgwidth设置图像的宽度属性。

$(window).load({

var imgwidth = window.innerWidth;
$('image_selector').width = imgwidth;
$("#featured").orbit();

});

【讨论】：

加载图片时 - 它们有 100% 的宽度，但加载后 img 的宽度又是 1600px
对不起 - 我的错 - 图像已加载并具有全屏宽度，但轨道不起作用。我有网站上的图片列表

【解决方案3】：

那么您的 CSS 设置是什么？如果将容器 ('#featured') 和图像的宽度设置为 100%，它应该将图像拉伸到窗口的宽度。无需用javascript计算宽度。

【讨论】：