通过Javascript检查img的纵横比

我一直在寻求一个可行的css解决方案，以获得一个具有不同比例图像的响应性照片库。
不幸的是，我想通过css实现这一点太复杂了，所以唯一快速简单的解决方案是使用javascript检查缩略图的纵横比，并更改某些缩略图的css内联：
脚本应检查每个缩略图的

高度：宽度

比率，如果比率低于0.6667（2:3），则通过css设置

高度：100%；最大宽度：无以覆盖实际规则。如果更容易，也可以添加一个类

如何通过javascript实现这一点？（jquery也可以使用，因为库已经存在于其他插件中）

网格的结构如下所示：

<ul id="gallery" class="gallery-grid">
  <li class="grid-block">
    <div class="block-wrap">
        <div class="link-wrap">
            <a href="<?php echo $photo->sourceImageFilePath; ?>" class="block-link" target="_blank" >
                <img class="block-thumb" src="<?php echo $photo->thumbImageFilePath; ?>"/>              
            </a>
        </div>  
    </div>
  </li>
</ul>






当然，如果你能找到一个可行的css的答案，我前面的问题是更欢迎！谢谢
 您可能只想查询每个缩略图并进行计算

$('img').each(function(_, img) {
    var $this = $(this);

    if( $this.height() / $this.width() < 0.6666666666666667 ) {
        $this.css({
            height: '100%',
            maxWidth: 'none'
        });
    }
});

$（'img'）。每个（函数（'img'））{
var$this=$（this）；
如果（$this.height（）/$this.width（）<0.6667）{
$this.css({
高度：“100%”，
maxWidth:“无”
});
}
});
var比率=$img.height（）/$img.width（）；
如果（比率<（2/3））{$img.css（{height:'100%'，maxWidth:'none'}）}
如果你在谷歌上搜索“javascript获取图像高度”，你会发现很多结果，不要那么懒散，搜索起来有点难。我在谷歌搜索的第一页上找到了一个相关的主题。我想我应该指定一个我对javascript编程一无所知的地方。当然，我一直在胡思乱想这个问题，但我还没有找到一个相当容易理解和实现我自己的需要的东西，我的坏，我想…谢谢你的回答，你的解决方案也很有效，但是@jAndy首先回答了，所以我给了他接受，不管怎样，投了赞成票。谢谢。嗨，我已经实现了你的代码，但不幸的是，它的工作似乎“不一致”。有时，它也将该规则应用于尊重比率的
img
元素，不知道为什么。我最好的猜测是脚本在加载页面时无法读取原始的
src
？@Gruber:是的，非常肯定。您应该在每个图像
.load
回调上应用该代码，或者转到
窗口.onload
事件，该事件在传输和加载所有图像时触发（当然，可能会很晚才启动，您需要尝试）。谢谢。像这样的，对吗<代码>$（窗口）.load（函数（）{*您的答案*}

这个更正现在似乎可以正常工作了，我这样问是因为我对js真的是一个新手。@Gruber:是的，应该可以。7年后才开始讨论这个话题，但是：如果我的原始图像是4608x3456，DOM中的图像是211x400，为了适合我的图像库，我的条件应该是什么？

var ratio = $img.height() / $img.width();
if ( ratio < (2/3) ) { $img.css({ height: '100%', maxWidth: 'none' }) }