当先锋百科网

首页 1 2 3 4 5 6 7

在网页制作中,表格是一个非常常见的页面布局方式。但是,在表格中插入图片时,往往会发现图片无法占满单元格的情况,导致页面布局不美观,影响用户体验。那么,要如何使用 CSS 让图片占满表格单元格呢?

table{
border-collapse: collapse;
}
td{
width: 100px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
padding: 0;
}
td img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

上述代码中,我们给表格设置了边框合并,使单元格边框更加美观;对表格中的单元格进行了样式设置,其中 width 和 height 分别设置了单元格的宽和高,text-align 和 vertical-align 分别控制单元格内文本的水平和垂直位置,padding 设置为 0,去除多余的内边距。最后,我们对单元格内的图片进行样式设置,通过 display:block 让图片在单元格内显示为块级元素,width 和 height 分别设置为 100%,让图片尺寸与单元格大小一致,而 object-fit:cover 则保证了图片不会被拉伸变形,同时完全填充单元格。

通过以上样式设置,我们就能轻松实现图片占满表格单元格的效果,让网页页面布局更加美观。