I'm working through [Mozilla's tutorial on responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Part of the tutorial explains how you can use the responsive design feature of a browser's developer tools to see the pixel demensions of an embedded image on various display sizes.

It asks students to view [their demo page](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) in a browser, and open up the responsive design developer tool. I'm using Chrome and did just that. I then set the screen demensions to `320 X 480`, and inspected the first picture in the body of the page. However, Chrome says the dimensions of the picture are `800 X 464`. How can that be if the screen itself is only `320 X 480`?

Furthermore I tried it out in Firefox, and Firefox gives `280 X 162.4`.

So:

1. What are the units for all those demensions? I presumed all the dimensions were in pixels, but a fractional pixel doesn't really make sense.
2. Assuming the units are all the same, why is the picture larger than the screen in Chrome, and why does Chrome disagree with Firefox?