通过Javascript检查图像的纵横比

Question

我一直在这个问题中寻求一个CSS可行的解决方案，用于响应式照片库，其中包含不同比例的图像。
不幸的是，我认为通过CSS做到这一点太复杂了，因此唯一快速简便的解决方案是使用JavaScript来检查缩略图的宽高比，并针对某些缩略图更改CSS内联样式：
脚本应检查每个缩略图的height:width比率，如果比率低于0.6666666666666667（2：3），则通过CSS设置height:100％; max-width:none;以覆盖实际规则。也可以添加一个类，如果更容易。
如何通过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解决方案来回答我之前的问题，那就更加受欢迎了！谢谢！

- Gruber

---

如果你在谷歌上搜索“javascript获取图片高度”，你会找到很多结果，不要这么懒。 - zerkms

再努力搜索一下。我在谷歌搜索的第一页上就找到了一个相关主题。 - Joseph

我想我应该在某个地方明确说明一下，我对JavaScript编程并不是很了解。当然，我已经在Google上搜索了这个问题，但我没有找到什么容易理解和实现到我自己的需求中的东西，这是我的错，我猜... - Gruber

Answer 1

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

- elclanrs

---

谢谢你的回答，你的解决方案也有效，但是@jAndy先回答了，所以我给了他采纳，不过还是点了赞。谢谢。 - Gruber

Answer 2

你可以查询每个缩略图并进行计算。

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

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

- jAndy

---

嘿，我已经实现了你的代码，但不幸的是它似乎工作“不一致”。有时它也会将规则应用于遵守比例的 img 元素，我不知道为什么。我最好的猜测是脚本在加载页面时无法读取原始的 src？ - Gruber

@Gruber：是的，绝对没错。你应该在每个图像的“.load”回调函数上应用该代码，或者选择window.onload事件，该事件在所有图片被传输和加载后触发（当然这可能会相当晚，你需要尝试一下）。 - jAndy

谢谢。类似这样的代码正确吗？ $(window).load(function(){*你的回答*} 现在看起来已经正常工作了，我问这个问题是因为我对js很菜。 - Gruber

@Gruber：是的，那应该可以。 - jAndy

有点晚了，距离该话题已经过去七年了，但问题是：如果我的原始图像是4608x3456，而DOM中的图像是211x400，为了适应我的图库，我的条件应该是什么？ - Jefry90