保留缩略图中的原始比例

Posted 2023-03-06

【中文标题】保留缩略图中的原始比例

【英文标题】：Keep the original ratio in a thumbnail image

【发布时间】：2016-03-02 08:49:53

【问题描述】：

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

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

例子：

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

【参考方案1】：

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