通过Javascript检查img的宽高比

Question

我一直在问这个问题的css可行解决方案,以获得具有不同比率图像的响应式照片库.
不幸的是我觉得通过css这样做太复杂了,所以唯一快速简便的解决方案就是使用javascript来检查缩略图的宽高比并更改某些拇指的内联css:
脚本应该检查height:width每个缩略图的比例,如果ratio低于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回答我之前的问题,那就更受欢迎了!谢谢!

Answer 1

您可能只想查询每个缩略图并进行数学计算。

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

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

Answer 2

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