Question

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

由于某种原因，我在使用jquery循环插件工作时遇到了一些麻烦。

本质上，服务器端代码只是从数据库中提取它们并将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上使用'before'选项，但似乎你不能真正影响那里的图像属性。我尝试使用它来根据快速宽高比计算更改window_h变量，但即使在我的onBefore函数中更新它似乎也不会对循环图像产生任何结果......

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

谢谢！ - J

Answer 1

如果您使用CSS max-width和max-height HTML [{1}}和width实例，则不会丢失宽高比。尝试将height属性添加到您的图片

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

1 个答案: