Jquery函数：获取图像宽度和高度然后addClass不起作用答案

【问题标题】：Jquery function : Get img width and Height then addClass dont workJquery函数：获取图像宽度和高度然后addClass不起作用
【发布时间】：2020-10-05 05:00:22
【问题描述】：

我在 Jquery 中遇到了一个恢复图像宽度和高度的函数。

这个想法很简单：

如果我的图片宽度小于长度，那么添加我的类... 否则添加另一个类。

它有效，但不是所有时候我都觉得：

本页示例：

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

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

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

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

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

你有什么想法吗？即使没有 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');
    }
  })
});

【问题讨论】：

您到底想达到什么目标？所有图像都在最大高度内并保持其纵横比？你应该可以只用 css 来做到这一点。尝试创建一个Minimal Reproducible Example。
作为一个 wordpress 网站，不知道哪个 css 是您的自定义 css 以及哪个是需要覆盖的主题 css，很难说该怎么做。这是你的 CSS：.wpb_fp_quick_view_img.wpb_fp_has_gallery img {max-height: 100vh!important;}？看起来将其更改为 76vh 应该可以解决高度问题，但要保持纵横比，您需要摆脱 width: 100% 并为 .wpb_fp_quick_view img 类设置 max-width: 100%

标签： javascript jquery css image-processing

【解决方案1】：

您只需在 CSS 中将图像的 max-height 从 100vh 更改为 max-height: calc(100vh-100px)。（100px 是标题的大小）

img:

【讨论】：

您可以根据标题的高度更改100px。看看什么适合你。