将原始比例保留在缩略图中

Question

我在博客中使用的缩略图大小为100 * 60，但有时我想使用方形图像。

是否可以使用Wordpress插件或CSS通过在侧面添加背景以保持图像的原始比例来使其适合？

示例：

1. 原始图片尺寸：120 x 120
2. 添加额外的白色/透明背景，使其处于缩略图比例：200x120 原始图像右侧和左侧40像素，因此它居中
3. 将图像尺寸从200 * 120缩小到100 * 60。

Answer 1

您可以将图像设置为缩略图元素的背景，然后使用background-size: contain;确保它不会溢出容器外。这是一个jsfiddle。