Question

从下面的小提琴中可以看出，棋盘的响应应该不超过512px宽，同时缩小以适应任何设备。这些作品也应该响应董事会。我遇到的问题是，当我在棋盘上/在方形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中大小的填充按钮。请记住，当您使用填充时，它会将空间与容器的总和相加，因此当您添加图像时，您将获得图像大小和添加的填充。

响应棋盘问题

1 个答案: