Question

我有几张图像要显示在表格中，但要以缩略图形式显示。像这样：

Click to open the example image

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

这是我的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>

如何获取缩略图？

更新：另一个示例图片： Another Example image 该捕获显示了一些图像，这些图像位于我的笔记本电脑的文件夹中，如您所见，图像编号4比其他图像最高，这是因为原始图像比其他图像最高。这正是我想要的，显示较小的图像，但尊重此类内容。

Answer 1

看起来在代码上方，使用100％的高度和固定的宽度。交换那些属性。为图像设置固定的高度，并将宽度设置为100％。

.thumbnail img {
    height:250px;
    width:100%;
}

Answer 2

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

list(A = data_frame(ID = c(101, 102, 103),
                    x = c(1,2,3)),
     B = data_frame(ID = c(101, 102, 103),
                    x = c(4,5,6)),
     C = data_frame(ID = c(101, 102, 103),
                    x = c(7,8,9))) %>% 
  purrr::reduce(left_join, by = "ID")

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

如何在表格中创建缩略图图像

2 个答案: