Add image to table cell in html and fill it completely

Reprinted: http://www.cnblogs.com/zmjh/p/8810805.html

The css style is as follows:

.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;
            }

The main html code is as follows:

<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>