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

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 中完成所有操作。

background-image: url("https://www.example.com/image.jpg");
background-size: cover; // use different options for different effects
background-repeat: no-repeat; 
background-position: center; 
height: 80px; 
width: 80px;

Answer 2

是的，最好避免使用 js。

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

还有许多其他可用的裁剪方法，但实际上，这就是适合对象的用途。

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

CSS options to deal with static width but variable height images

html

css

image

aspect-ratio