响应式棋盘问题

Question

As can be seen in the fiddle below, the chessboard responds as it should which is no more then 512px wide, while shrinking to fit whatever device. The pieces also respond with the board as they should. The problem I am having is that when I add a piece to the board / inside a square div, its like the img is creating a bunch of extra space below. Looks like its twice the size of the img... I know that the img's are causing the issue because I removed all the img's from the top of the board and the squares are completely square as they should be. Yes, the img's I am using are 64px x 64px. Any ideas of whats happening here? Any help would be great. Thanks!

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

You can just add position:absolute; to your .piece class: http://jsfiddle.net/4vxLP/2/ The problem you are having is the padding-botton you are using to keep the size in the empty divs. Remember when you use padding it sums space to the total of the container, so when you add the image you have the image size plus the padding added.