html中table單元格添加圖片完全填充

css樣式如下：

.table{
                display: table; 
                border-collapse: collapse;
                width: 400px;
                height: 200px;
            }
            .tr{
                display: table-row;
                height: 100px;
            }
            .td{
                display: table-cell;
                width: 100px;
                text-align: center;
                vertical-align: middle;
                border: solid 1px red;
                table-layout: fixed;
            }
            .table .td img{
                width: 100px;
                height: 100px;
                display:block;
            }

html核心代碼如下：

<div class='table'>
            <div class='tr'>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'></div>
                <div class='td'></div>
            </div>
            <div class='tr'>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'></div>
                <div class='td'></div>
                <div class='td'></div>
            </div>
        </div>