Fix size of 'pieces', no border

[JamesPHoughton]

I'm creating a question in which students assemble a puzzle by putting components into the correct place on the background image. To be precise, they see this background image:

and have pieces to fill in:

etc...

such that the final result should look like this:

I can create zones that match the locations for the pieces with no problems:

and I can set the percentage width that the pieces should take up in the image, but the pieces are given a blue border that I can't remove, such that the 'puzzle' looks like:

This could be fixed by removing the border on images, or allowing it's width to be set to 0. Is there a way I can do this?

It would be nice, although isn't strictly necessary, to specify that the pieces merely use the same resolution as the background image, as this would size them appropriately without having to do the percentage adjustment.

[JamesPHoughton]

Attempted workaround:

Set the piece color background to a transparent color: #ffffff00 means that the border is now clear.

Then offset the boxes to the left and upward, so that the upper left corner puts the center of the image in the correct location

(Having to do this because despite selecting that items should be center aligned, they still seem to be left aligned.)

Setting the piece width percentages to account for the (now invisible border), this looks approximately correct:

However, the piece width percentage seems to be set to the width of the window, not the width of the image, so resizing the browser window distorts the piece fitting:

(Larger window size)

(Smaller window size)

Setting the pieces and the background to display at the same resolution (assuming they were created at the same resolution) would fix this.

[JamesPHoughton]

Rethinking this, the zone definitions are specified in terms of width, height, x and y in the pixels of the background image. I'd like to be able to set exactly the same parameters for the items: their width and height in pixels of the original image, and the x and y locations of their upper left corners.

[JamesPHoughton]

Seems like the ability to set item size was included in the previous version, but removed to improve mobile compatibility:

https://github.com/edx-solutions/xblock-drag-and-drop-v2/blob/5aaeef5b6861cee13aee4119e56e7ab1d39876cb/drag_and_drop_v2/public/js/drag_and_drop_edit.js#L607-L609

but that it's still there somewhere:
https://github.com/edx-solutions/xblock-drag-and-drop-v2/blob/5aaeef5b6861cee13aee4119e56e7ab1d39876cb/drag_and_drop_v2/public/js/drag_and_drop_edit.js#L615-L616

Is the solution to just use the old style drag-and-drop?