css - 响应式棋盘问题

Question

从下面的 fiddle 图中可以看出，棋盘的响应宽度不超过 512 像素，同时缩小以适应任何设备。这些棋子也会根据棋盘做出应有的 react 。我遇到的问题是，当我将一 block 添加到板/方形 div 内时，它就像 img 在下面创建了一堆额外的空间。看起来它的大小是 img 的两倍...我知道是 img 引起了这个问题，因为我从板的顶部移除了所有 img，并且正方形完全是正方形，因为它们应该是这样的。是的，我使用的 img 是 64px x 64px。对这里发生的事情有什么想法吗？任何帮助都会很棒。谢谢!

http://jsfiddle.net/4vxLP

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

Answer 1

您可以将 position:absolute; 添加到您的 .piece 类:http://jsfiddle.net/4vxLP/2/ 您遇到的问题是您用来将大小保持在空 div 中的填充按钮。请记住，当您使用填充时，它会将空间与容器的总和相加，因此当您添加图像时，您会得到图像大小加上添加的填充。