html - 在 HTML 中缩放图像

Question

我必须在一个页面中显示一堆图像。图片大小不一，有的很宽，有的很细。我想把它们都放在一个固定宽度和固定高度的容器中。

假设图像较小，我们保留大小并将其放在容器的中心。如果图像较大，我们根据突出的方向将其缩小。

我们的容器是 500x500，图像是 1000x400，然后它会像 500x200 一样缩放。同样，如果图像为 400x1000，则缩放后的图像为 200x500。仅使用 html/css 是否可行？任何帮助表示赞赏。谢谢。

Answer 1

您可以使用 max-width 和 max-height CSS 属性来获得您想要的效果:

#container img {
    max-width:500px;
    max-height:500px:
}

请注意，这在 IE6 中不起作用。要使其在那里工作，您可能需要缩放图像服务器端或使用令人讨厌的表达式。您可以在谷歌上找到其他解决方法:)