Css 国际象棋棋盘问题

从下面的小提琴中可以看出，棋盘的响应应该是不超过512px宽，同时缩小以适应任何设备。这些棋子也会像它们应该的那样与棋盘一起响应。我遇到的问题是，当我在一个正方形div中添加一块时，它就像img在下面创建了一堆额外的空间。看起来是img的两倍大。。。我知道是img引起了这个问题，因为我把所有的img都从电路板的顶部移除了，而这些方块是完全方形的。是的，我使用的img是64px 64px。你知道这里发生了什么吗？任何帮助都会很好。谢谢

.fl{
浮动：左；
}
.董事会{
最大宽度：512px；
保证金：0自动；
}
怀特方先生{
最大高度：64px；
最大宽度：64px；
宽度：12.5%；
垫底：12.5%；
背景色：#F7F7F7；
}
布莱克广场先生{
最大高度：64px；
最大宽度：64px；
宽度：12.5%；
垫底：12.5%；
背景色：#298；
}
.件{
最大宽度：100%；
最大高度：100%；
}

您只需添加

位置：绝对到你的.piece类：
现在的问题是，您正在使用填充按钮将大小保持在空div中。请记住，当您使用填充时，它将空间和容器的总空间相加，因此当您添加图像时，您将添加图像大小和填充。
您也可以使用框大小：边框框；这不会增加填充到div的总大小。谢谢大家！我甚至没想过。仍在快速响应设计。。。
<div id="A2" class="whiteSquare square fl">
    <img src="img/64PieceImg/white_pawn.png" class="piece"/>
</div>


.fl{

    float:left;
}

.board{

    max-width:512px;
    margin: 0 auto;   
}

.whiteSquare{

    max-height: 64px;
    max-width: 64px;
    width:12.5%;
    padding-bottom:12.5%;
    background-color:#F7F7F7;
}

.blackSquare{

    max-height: 64px;
    max-width: 64px;
    width:12.5%;
    padding-bottom: 12.5%;
    background-color:#29BEE8;
}

.piece{

    max-width: 100%;
    max-height: 100%;
}