For the last 15+ or so years I thought <img width="100%" height="100%"> meant “display the image by the number of pixels in the image in CSS pixels“. In other words if there are 200×100 pixels in the image then <img width="100%" height="100%"> should display the image 200×100 pixels in size.
But today I found out that’s not what any browser does including IE9. Instead <img width="100%" height="100%"> tells the browser to display the image in CSS pixels relative to its internal DPI size. In other words CSS is 72dpi. If the image internal DPI is 144dpi and there are 200×100 pixels in the image then the browser will display the image as 100×50 CSS pixels. If you remove the width="100%" height="100%" the browser will display the image at 200×100 CSS pixels.
example
Has this been common knowledge like forever and somehow I missed it?
MDN makes no mention of this and in fact MDN claims a percent value is invalid in HTML5 and yet I’ve tested in Safari 10.1.1, Chrome 59, Firefox 54 and IE9 and it worked in all of them
