How to auto-fit an image that was positioned using background-position to a container with specific CSS measures?

0

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

    
asked by Victor Alvarado 30.12.2018 в 03:50
source

0 answers