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

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



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

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

最佳答案

将这些作为您的样式可能会有所帮助：

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

这将使图像保持正确的宽高比，并最大化宽度或高度或同时最大化两者，以使图像不超过在max-width和max-height参数上设置的宽度和高度。

关于html - 如何调整超出其指定区域的缩略图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29582226/