如何调整超出指定区域的缩略图？

Question

我有images uploads，当图像显示为缩略图时，有时它们太大而且与区域重叠。

如何更改代码以使图像不会与区域重叠？这似乎发生在高大的图像上。一种可能性是调整缩略图的大小，但我不愿意这样做，我想知道是否还有其他解决方案。 html可用here，css可用here。我创建了fiddle问题。我想到要么在这里使用答案，要么像这样减小图像尺寸。

url = images.get_serving_url(str(image.primary_image.key()),
                                 size=110)

Answer 1

将这些作为您的风格可能是有益的：

max-width: <width>;
max-height: <height>;
width: auto;
height: auto;

这样可以使图像保持正确的宽高比，并最大化宽度或高度或两者，使图像不超过max-width和max-height参数设置的宽度和高度。 / p>