Question

我正在处理一些具有静态宽度的外部图像，但产品高度是可变的。

因此，当在列表中显示时，行的高度非常不均匀，并且在移动设备上查看时看起来很乱。我正在使用的平台输出80px x 80px的缩略图，但当然，由于宽高比不同，有些图像看起来很乱。

处理具有固定宽度但可变高度的图像的最佳解决方案是什么，以获得不会过于扭曲的一致缩略图？

[![52px height][1]][1]
[![135px height][2]][2]
[![135px height][3]][3]
[![135px height][4]][4]
[![114px height][5]][5]

https://images-eu.ssl-images-amazon.com/images/I/4137QNeZPuL._SL500_SL135_.jpg
https://images-eu.ssl-images-amazon.com/images/I/41XYDSg9cgL._SL500_SL135_.jpg
https://images-eu.ssl-images-amazon.com/images/I/51uKMqjNcYL._SL500_SL135_.jpg
https://images-eu.ssl-images-amazon.com/images/I/51aDh6YhzxL._SL500_SL135_.jpg
https://images-eu.ssl-images-amazon.com/images/I/51qdmedWltL._SL500_SL135_.jpg

Answer 1

为此，我建议在css中进行所有操作。

{{1}}

Answer 2

是的，最好避免js。

但是如果你想避免背景图片并使用img元素，try the object-fit property。除了IE / Edge之外，浏览器支持是好的，因此这将是渐进增强的情况，即/边缘看起来不一样，但它将是功能性的，并且可以呈现 - 只是不像其他浏览器那样简化。

还有很多其他裁剪方法可供使用，但实际上，这就是对象拟合的一种方式。

用于处理静态宽度但可变高度图像的CSS选项

2 个答案: