以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中不起作用。要使它在那里工作，您可能需要缩放图像服务器端或使用令人讨厌的表达式。您可以在Google上找到其他解决方法：）

Answer 2

如果您调整服务器上的图像大小，您将获得更好的结果。在浏览器中调整大小意味着客户端正在下载比必要文件大得多的文件，并且调整大小的质量不是很好。

Answer 3

没有。使用htm和css并不完全可行。

img{ width: 100% }

将使1000x400图像显示为500x200 bu 400x1000将显示为500x1200。

您可以使用javascrpt：

function scaleimage(id)
{
    var image = document.getElementById(id);
    if(image.offsetWidth > image.offsetHeight)
    {
         if(image.offsetWidth > 500)
         {
             image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
             image.offsetWidth = 500;
         }
     }
     else
     {
         if(image.offsetHeight > 500)
         {
             image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
             image.offsetHeight = 500;
          }
    }
}  

抱歉格式不佳，好像我的iPhone不支持它。

Answer 4

在服务器上执行此操作的最佳方法。或者在上传之前手动（如果可能的话）。

Answer 5

您可以使用宽度和高度CSS属性来获得所需的效果：

container img {

width:500px;
height:500px:

}

请注意，这项工作适用于所有浏览器。

由于 Ptiwari。