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

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 和 上设置的宽度和高度最大高度参数。