javascript jquery循环将图像重新缩放到浏览器窗口，但保持纵横比

我有一个基于php的网站，需要在主页上显示任意比例的图像。要求是使它们填充浏览器窗口，但保留其纵横比

由于某些原因，我在使用jquery循环插件实现这一点时遇到了一些困难

基本上，服务器端代码只是将它们从db中提取出来，并将img元素推送到一个div中

然后在我的javascript代码中，我有以下内容：

$(document).ready(function() {
  var window_h = $(window).height();
  var window_w = $(window).width();
  // sets the div that contains the jquery cycle images
  $('#homepage-background-images').width(window_w);
  $('#homepage-background-images').height(window_h);

$(window).resize(function() {
 window_h = $(window).height();
 window_w = $(window).width();
 $('#homepage-background-images').width(window_w);
 $('#homepage-background-images').height(window_h);
});

// homepage cycle
$('#homepage-background-images').cycle({
  fx: 'fade',
  speed: 5500,
  fit: 1,
  width: window_w,
  height: window_h,
});

//

显然这是行不通的，因为每个图像都有不同的纵横比，但我想知道如何将串行纵横比传递到jquery循环中？这些将始终需要考虑浏览器窗口的大小

我曾尝试在jquery上使用“before”选项，但似乎无法真正影响那里的图像属性。我试图使用它来根据快速纵横比计算更改window_h变量，但即使在我的onBefore函数中更新它，似乎也不会对循环图像产生任何结果

有什么想法吗？这很棘手，还是我遗漏了一些明显的东西

谢谢！ -J

如果使用HTML宽度和高度的CSS最大宽度和最大高度实例，则不会丢失纵横比。尝试将样式属性添加到图像中