6

在这个问题中，我一直在为具有不同比例图像的响应式照片库询问一个可行的 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 答案来回答我之前的问题，那就更受欢迎了！谢谢！

4

2 回答 2

12 
var ratio = $img.height() / $img.width();
if ( ratio < (2/3) ) { $img.css({ height: '100%', maxWidth: 'none' }) }
于 2012-10-28T23:15:47.317 回答
7

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

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

    if( $this.height() / $this.width() < 0.6666666666666667 ) {
        $this.css({
            height: '100%',
            maxWidth: 'none'
        });
    }
});
于 2012-10-28T23:15:23.667 回答