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

标签 javascript html css

我有几张图片想在表格中显示,但以缩略图形式显示。像这样:

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 比其他图像高,这是因为原始图像比其他图像高。这正是我想要的,显示更小但尊重这种东西的图像。

最佳答案

在您上面的代码中,您似乎使用了 100% 高度和固定宽度。交换那些属性。给你的图片一个固定的高度,宽度设置为 100%。

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

关于javascript - 如何在表格中创建缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53964935/

相关文章:

javascript - 如何使用 createjs 定位 MovieClip

javascript - 如何调整 Canvas 的大小?

windows - css @keyframes 动画在 Windows 的 Safari 中不起作用

css - Bootstrap 可滚动面板

javascript - 如何使用 jQuery 将新元素添加到生成的元素中?

javascript - 引用存储值

html - 根据另一个 div 的高度使一个 div 居中

javascript - 动态 CRM : JavaScript GET request is not retrieving records using Web. API

javascript - 正则表达式:通过一次匹配捕获多个可选组

html - 导航菜单边框底线从中间展开