时间戳

首页 > 解决方案 > HTML 图像不会填满表格

html - HTML 图像不会填满表格

问题描述

我有一张 2x3 的桌子，左边是图片，右边是文字，布局在桌子上交错排列。

当在表格行中插入一个图像时，它不会填充该部分，它会在边缘添加填充并且小于它旁边的表格数据，即使它是表格行的大小。包含文本和背景颜色的表格数据更大。表格内的间距已关闭。

有什么方法可以使图像填充整个表格单元格而不增加额外的空间？

标签： html

解决方案

您可以使用CSS 属性td提供背景图像。background-image

td{
 border: 1px solid black;
 position: relative;
 height: 50px;
 width: 50px;
}
tr{
 border:2px solid grey;
}
.imgcontainer{
width: 150px;
height: 100px;
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<table>
<tr>
<td class="imgcontainer">
</td>
<td>Table Cell</td>
</tr>
</table>

推荐阅读