Question

我正在为各种尺寸的图像创建幻灯片，以便在画布区域内垂直和水平显示。

在我的CSS中，我将图像的宽度和高度设置为100％，以便每个图像按比例填充画布。我希望画布自动调整大小以适应观众的屏幕尺寸，因为图像的原始尺寸非常大（高达800像素）。

我正在使用jQuery 1.4，并使用图像的高度来计算绝对定位到画布中间的顶部值。

我尝试使用jQuery来获取.height（），innerHeight（）和outerHeight（），但它总是获得图像的完整大小。

我从jQuery对象中提取了DOM元素并尝试使用.width，.offsetWidth和.clientWidth，但这似乎总是返回图像的完整大小。

Firebug显示正确的尺寸，所以我知道有一些方法来计算图像的实际显示高度，我只是无法弄清楚它是什么。如果设置了max-height = 100％，如何获得图像的实际显示高度？

我不想在js中计算和设置每个图像的高度，但如果必须，我会。看起来我应该能够设置画布大小并让图像自动调整。

Answer 1

我建议将图像恢复为自动，然后获取图像值，然后将它们设置回100％。

$('img').each(function(){
   var self = $(this);
   self.hide() // Hide them, fading, you choose
      .css({'width':'auto', 'height':'auto'}) // set them to auto.
      .data('width', self.width())  // Now you can get the real size
      .data('height', self.height()) // And store it as jQuery data in the image.
      .css({'width':'100%', 'height':'100%'}) // Back to 100%
      .show();  // Show them.
});

或其他方式

$('img').hide().css({'width':'auto', 'height':'auto'})
   .each(function(){
      var self = $(this);
      self.data('width', self.width())
          .data('height', self.height());
   })
   .css({'width':'100%', 'height':'100%'}).show();

或者无需隐藏它们，因为可能更改太快，但您可能需要对逻辑进行一些调整，以便用户在第一次加载时看不到闪烁。

无论哪种方式，选择你的毒药。

在图像上使用max-width = 100％和max-height = 100％，计算显示宽度/高度

1 个答案: