Replace picture on Web Object - Picture is distorted

Hello,

I created a SL360 one slide course. The slide has a web object with these dimensions: x: 122px; y: 67px; w: 477px; h: 339px and I want to replace picture, so I have a nice image instead of the gray box (I am going to insert this slide into Rise 360 storyline block). My issue is, when I replace the picture with either a png or jpg, the picture gets extremely distorted. How do I format the picture so I know it's going to match the Web Object size and not get distorted? I tried just overlaying the image and grouping, but then the web object didn't launch (in another window - since I can't do embedded). I am sure I am doing it the hard way. Please give the correct instructions on how to do this easily. 

On a related note, am I able to change the Size and Position default from px to inches? Thanks.