所以我在电子商务环境中有一个产品网格,每个网格单元格的高度由照片的高度决定。在网格中显示时宽度始终相同,但有些图片设法更高。
我想找出最简单的方法(除了手动裁剪它们之外)来动态确定某个类别的最短照片的高度,然后将所有照片裁剪或蒙版到该高度?
这是一个非常基本的代码示例。想象一下,有一个 CSS 规则将类元素的每个 div 设置为 25% 的宽度,并且它们以内联方式显示。在这种情况下,就像在我的情况下,纵横比不相等的图像将比它们的邻居高或矮。
<div class="row">
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
</div>
最佳答案
有几种方法可以做到这一点,您可以将图像绝对定位在相对定位的 div 中,或者您可以将 div 设置为具有图像背景。如果您的图像尺寸变化很大,您可能需要使用背景方法。如果不是,你可能想要绝对定位它们。什么最适合你。这是示例 CSS:
.item{
position:relative;
padding-bottom:20%; /*padding-bottom for height*/
overflow:hidden;
}
img{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width:100%;
}
/* background method properties */
.item{
background-size:cover !Importqnt;
background-position: center !Important;
}
然后对于绝对定位,您可以在示例中使用标记
<div class="row">
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
<div class="item">
<img src="..."/>
</div>
</div>
对于背景你可以为每个元素设置背景
<div class="item" style="background:url('...')"></div>
这是一个 fiddle Fiddle Demo
关于javascript - 使用 CSS 和/或 JS 动态裁剪(或屏蔽?)所有图像到最短图像的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41965121/