我有几张图片想在表格中显示,但以缩略图形式显示。像这样:
在上图中,你可以看到图像有不同的尺寸,有些比其他的高,这就是我想要做的, 小图像但保留其方向格式。
这是我的 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/