gpt4 book ai didi

html - 如何在html中对齐切片图像?

转载 作者:行者123 更新时间:2023-11-28 10:56:51 25 4
gpt4 key购买 nike

有人给了我一些切片图像放在一个 html 中。我自己没有切片。我建了一张 table 。对于每一行,我放置了 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>

最佳答案

你可以试试这个:

表格,td img{宽度:100%;高度:100%

在 img 类中应用边框

关于html - 如何在html中对齐切片图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22584409/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com