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

Question

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

出于某种原因，我在使用 jquery cycle 插件时遇到了一些问题。

本质上，服务器端代码只是将它们从数据库中拉出并将 img 元素推送到一个 div 中。我使用 php 读取图像大小并将其写入 alt 元素

然后在我的 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 上使用“之前”选项，但似乎你不能真正影响那里的图像属性。我尝试使用它来基于快速纵横比计算来更改 window_h 变量，但即使在我的 onBefore 函数中更新它似乎也不会在循环图像上产生任何结果......

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

谢谢! -J

Answer 1

如果您使用 HTML width 和 height 的 CSS max-width 和 max-height 实例，它不会'失去纵横比。尝试将 style 属性添加到您的图像