Question

我被给了一些切片图像放在一个html中。我自己没有切片。我建了一张桌子。对于每一行，我放置了4个带有需要对齐的边框的图像。最终的html应该看起来像一个网格，所有图像的边框都正确对齐。但是，我注意到在特定的行中，4个原始图像确实具有相同的尺寸。例如

我尝试更改所有图片的宽度和高度，表格和单元格中没有边距/填充。但是，边框不是水平和真实对齐的。这是具有图像原始尺寸的行之一的示例。我知道有些规则可能是多余的，但我只是在没有找到解决方案的情况下尝试所有方法。

感谢您的快速反馈。

<html>        
<head>
<meta charset="utf-8">
<title>No name</title><style type="text/css">
img {vertical-align: top; margin:0 auto 0 auto; padding:0}
table, td {border:0; padding:0; margin:0; border-collapse: collapse; cellpadding:0; cellspacing:0;}

</style>
</head>
<body>
<pre width="" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td id="imgA"><a href=""><img src="ImageA" width="187" height="127" alt=""/></a></td>
<td id="imgB"><a href=""><img src="ImageB" width="184" height="127" alt=""/></a></td>
<td id="imgC"><a href=""><img src="ImageC" width="182" height="126" alt=""/></a></td>
<td id="imgD"><a href=""><img src="ImageD" width="187" height="126" alt=""/></a></td>
</tr>
</pre>
</body>
</html>

Answer 1

你可以试试这个：

表，td img { 宽度：100％; 身高：100％ }

在img类中应用border

如何在html中对齐切片图像？

1 个答案: