Jquery function：获取 img 宽度和高度，然后 addClass 不起作用

Question

我被困在 function 上的 Jquery 中，它可以恢复图像的宽度和高度。

这个想法很简单：

如果我的图像宽度小于长度，则添加我的 class... 否则添加另一个 class。

它有效，但并非总是我觉得：

此页面的示例：

https://www.jean-desazars.com/advanced-portfolio-test/

（点击第一张图片） 我的图片太高，因此超出了内容，我希望它适合弹出窗口，无需滚动和调整大小。

所以我想让它，如果图像超过大小 X，我添加一个 class 以便能够根据情况在 css 中对其进行操作。

但是我的印象是图像是在加载 DOM 后定义的（在单击并打开弹出窗口时），因此他没有找到它。

所以我通过了 naturalWidth / naturalHeight，但无论图像大小，添加的 class 保持不变。

请问你有什么想法吗？ 即使没有 JS，我也是一个接受者，我的限制是每个图像都有不同的大小，但无论它有多大，它都必须在没有滚动的情况下适应。

谢谢你的帮助;）

祝你今晚愉快： ：）

代码：

$(document).ready(function() {
  var imgs = $('.wpb-fp-main-image img');//jQuery class selector
  imgs.each(function(){
    var img = $(this);
    var width = img.naturalWidth; //jQuery height method
    var height = img.naturalHeight; //jQuery height method
    if(height > width){
       img.addClass('img-h');
    }else{
       img.addClass('img-n');
    }
  })
});

Answer 1

您应该在 CSS 中简单地将图像的max-height从100vh为max-height: calc(100vh-100px) 。 （100px 是标题的大小）

img ：