时间戳

首页 > 解决方案 > 如何在表格中创建缩略图

javascript - 如何在表格中创建缩略图

问题描述

我有几张图像要在表格中显示，但要显示为缩略图版本。像这样的东西：

点击打开示例图片

在上图中，您可以看到图像具有不同的大小，有些比其他的高，这就是我正在尝试做的，小图像但保留其方向格式。

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
	<title>Images</title>
</head>
<body>

<table>
	<thead>
		<tr style="border: 1px solid black;">
			<th style="border: 1px solid black;">IMAGE</th>
			<th style="border: 1px solid black;">IMAGE</th>
			<th style="border: 1px solid black;">IMAGE</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src='https://i.ibb.co/6DsDQQ3/logo.png' width="50%" height="100%" style="margin-left: 50px;"></div></td>

			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src="https://i.ibb.co/0n2zfJg/product-features.png" width="50%" height="100%" style="margin-left: 50px;"></div></td>

			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src="https://i.ibb.co/6BRPLvs/intro-bg.jpg" width="50%" height="100%" style="margin-left: 50px;"></div></td>

		</tr>
	</tbody>
</table>

</body>
</html>

如何获取缩略图？

更新：另一个示例图像： 另一个示例图像 。此捕获显示了我笔记本电脑文件夹中的一些图像，如您所见，图像编号 4 高于其他图像，因为原始图像高于其他图像。这正是我想要的，显示图像更小但尊重这种事情。

标签： javascripthtmlcss

解决方案

只设置一个属性，选择让所有图像具有相同的高度或相同的宽度，例如相同的宽度：

  <tr>
            <td style="border: 1px solid black;"><img src='https://i.ibb.co/6DsDQQ3/logo.png'  style="height: 200px;"></td>

            <td style="border: 1px solid black;"><img src="https://i.ibb.co/0n2zfJg/product-features.png"  style="height: 200px;"></td>

            <td style="border: 1px solid black;"><img src="https://i.ibb.co/6BRPLvs/intro-bg.jpg"  style="height: 200px;"></td>

        </tr>

顺便说一句，这不会改变加载时间，如果你想减少加载时间，你需要一些后端语言（PHP？）来动态返回一个较小的图像。

推荐阅读