我一直在 this 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 答案来回答我之前的问题,那就更受欢迎了!谢谢!
最佳答案
var ratio = $img.height() / $img.width();
if ( ratio < (2/3) ) { $img.css({ height: '100%', maxWidth: 'none' }) }
关于javascript - 通过 Javascript 检查 img 的纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13113964/