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

javascript jquery cycle rescale images to browser window BUT keeping aspect ratio

本文关键字：窗口 浏览器 图像 循环 jquery 新缩放 缩放 javascript      更新时间：2023-09-26

我有一个基于 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上使用"之前"选项，但似乎您无法真正影响那里的图像属性。我试图使用它来根据快速纵横比计算来更改window_h变量，但即使在我的 onBefore 函数中更新它似乎也没有对循环图像产生任何结果......

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

谢谢！- J

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

相关文章：