我一直在这个问题中寻求一个CSS可行的解决方案,用于响应式照片库,其中包含不同比例的图像。
不幸的是,我认为通过CSS做到这一点太复杂了,因此唯一快速简便的解决方案是使用JavaScript来检查缩略图的宽高比,并针对某些缩略图更改CSS内联样式:
脚本应检查每个缩略图的
如何通过JavaScript实现这一点?(JQuery也可以使用,因为该库已经存在于其他插件中)。
当然,如果你能找到一个可行的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解决方案来回答我之前的问题,那就更加受欢迎了!谢谢!