I have a sprite with 9 images of a character in movement, I know that using background-position I can locate the drawing of that image and then give it a width and a height to see how much to show.
The problem lies in the following:
If the image of the sprite is larger than the container, how can I auto-adjust the size of the resulting image to the container?
It happens that the sprite is cut every 64x66 and I would like to put a small image to occupy 64x64 of the cells in my map, even if I cut using 64x66 in my background_position
Here are some images and the code used:
Complete Sprite
Sprite with the applied class
.contenedor{
width:64px;
height:64px;
}
.warrior {
background-image: url('..knight.png');
background-position: 0px 0px;
width: 64px;
height: 66px;
}
The problem that generates is that being drawn on a chessboard this makes the cells are higher, because it measures more, but if I put 64x64 the image is cut off and the character is incomplete