Looking at the demonstration below, it's clear that the chessboard adjusts properly to a width of no more than 512px while adapting to different devices. The pieces also resize accordingly with the board. However, I'm encountering an issue when adding a piece onto the board or inside a square div – it seems like the image is creating excess space below it. It almost appears as if the image is twice its actual size... I have identified that the images are causing this problem because when I remove them from the board, the squares display correctly. I am using images that are sized at 64px x 64px. Any insights into what might be causing this issue? Any assistance would be highly appreciated. Thank you!
<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%;
}