I am creating a platform game, and the main character has three images for its left and right animation. The problem is that when it is walking and the player run into a block, if at that moment it switches to a stepping image which is bigger than the other imagesit gets stuck inside the block. A temporary fix to this issue was to make all the images the same size and just fill the smaller ones with white-space, however that doesn't work properly either because then the collision box is bigger than the player. Any suggestions? I also tried stretching all the images to the same size but that looked ugly.
You should create size values that are separate from the image size. This is often called a "hitbox". This way, you can add an image of any size with any given amount of whitespace, and collisions will be unaffected.
Fighting games use multiple hitboxes to handle complex collisions.