保留缩略图中的原始比例

Question

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

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

例子：

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

Answer 1

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