如何在 <td> 中制作相同大小的图像，但图像大小不同答案

【问题标题】：How to make same size image in <td>, but image diffrent size如何在 <td> 中制作相同大小的图像，但图像大小不同
【发布时间】：2013-04-07 03:16:54
【问题描述】：

我有很多图片要显示给<table> 或<td>

如何在<table> / <td> 中制作相同尺寸的图像，但图像尺寸不同。

查看我的网站点击这里：promolagi.com

谢谢。

【问题讨论】：

一般来说，您应该在服务器端处理您的图像并在那里创建缩略图。因为如果您使用 <img src="..." width=" " height=" " /> ，图像会在浏览器中缩小，即原始（大）图像会被传输（使用更多带宽）并且只会显示得更小。例如，如果您有 10 张大图像，每张 1MB，尽管它们显示为 50x50 的小图像，但仍会传输 10MB。

【解决方案1】：

在你的 CSS 中：

table img{
  width:200px;
  height: 300px;
}

像这样，您在表格中的所有图像都将具有 200x300 像素的大小。

您可以为每张图片指定此项：

<img style="height:200px" src="..." />

或

<img height="200px" src="..." />

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您的图像大小不同，并且您想要创建大小相同的缩略图。

您需要创建新的图像文件，即存储在服务器中的缩略图。（使用全尺寸图像并让浏览器调整它们的大小并不是一个好主意。）

您可以使用图像处理程序（Photoshop、PSP、Gimp 等）创建缩略图图像。通常这些具有处理多个图像的批处理选项。

或使用基于命令行的图像编辑器ImageMagic，这对于执行批处理作业非常方便。

或者使用专用的缩略图生成程序。有许多免费的替代品（Google 的缩略图生成器）。

由于图像具有不同的比例，因此您必须确定“相同大小”的含义。相同的宽度或相同的高度，或相同的最大尺寸（必须适合指定的矩形），或相同的面积。缩略图生成器程序通常允许您选择这些选项中的任何一个。然后它会为特定文件夹中的所有图像生成缩略图。

其中许多程序还可以为图片库生成 html 代码。

【讨论】：

【解决方案3】：

当您构建图像时，您可以将其高度和宽度设置为恒定。

<img src="..." width="50" height="50" />

请记住，它会拉伸您的图像以适合您想要的尺寸，并且质量会降低。

【讨论】：

【解决方案4】：

在 td 中添加一个 div 将 div 的大小设置为您希望图像显示的大小，然后将溢出设置为隐藏。这应该只显示图像的一部分，但它始终是相同的大小。

【讨论】：