Converting the captured coordinates into yards

There is a div with a background image with the following style :

#cont {
                position: relative;
                background-image: url('./st.png');
                background-repeat: no-repeat;
                width: 541px;
                height: 349px;
        }

Its background image has height of 349px and a height of 541px. The image is a soccer field. The length of a soccer field is 115 yards and breadth being 75 yards.

To convert the each captured coordinate (using mousemove event) into yards, I did this :

x_yard = (115*x1)/541
y_yard = (75*y1)/349

// x1 and y1 are the captured coordinates

It gives the incorrect result. XMax is near to 116 and YMax is near to 69. How could I convert the captured coordinates to yards?