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

时间:2015-11-28 08:53:12

标签: css wordpress image

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

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

示例:

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

1 个答案:

答案 0 :(得分:0)

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