Question

我试图做一个自定义的轮播/滑块元素。而且我遇到了一件毫无意义的事情。

当我尝试在加载文档时使用jquery获取图像大小时，它会计算错误的宽度/高度。我认为一旦页面显示文档没有被加载就会出现问题。但事实似乎并非如此，因为除了jquery文档加载函数之外，我甚至使用了https://github.com/desandro/imagesloaded库。

幸运的是我在CodePen上玩这个，所以这里是链接：Codepen

$( document ).ready(function() {

  $(".carousel").imagesLoaded(function(){
  //shows logo before images are loaded
  $(".logo-container").addClass("hide");
  $(".carousel").removeClass("hide");



  //get carousel dimensions
  const carouselEl = $(".carousel");

  //image
  const imageEl = $("img.active");

  //get active dimensions
  const elWidth = imageEl.width();
  const elHeight = imageEl.height();

  console.log(elWidth,elHeight);

  //set carousel dimensions
  carouselEl.width(elWidth);
  carouselEl.height(elHeight);
  });

});

我有什么遗失的吗？

感谢您的帮助。

Answer 1

你的css告诉图片有max-width:100vw; 100％的屏幕，所以在我的情况下总是有1920px。

你可以通过imageEl[0].naturalWidth

询问真实图像尺寸

解释

[0]将jquery对象转换为本机javascript HtmlElement（获取选择中的第一个）

然后你只需要使用naturalWidth，naturalHeight和ViewportWidth来定义所需的高度：

根据屏幕宽度和图像高度/宽度比计算所需高度。

naturalWidth / naturalHeight = screen ration =＆gt;应该等于：viewPortWidth /期望的高度。

viewPortWidth / naturalWidth * naturalHeight = desired (scaled) height。基于宽高比。

使用jQuery加载的文档上的响应图像大小

1 个答案:

解释

根据屏幕宽度和图像高度/宽度比计算所需高度。