Product preview card component solution

It was a bit hard to center the main content, I'm not familiar with img width and height. I'm unsure of the @media and I still don't know how many px to set in the width and height. I tried to put <img> into a <div>, but i can't center well, so I let it in the <main>. How can I choose the values of width and height on a img without distortion it?