Image resizing - without css or js…?

Question

Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.

http://canvas.is/images/logo_solid.png

I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.

How is this working? Thanks

Answer 1

I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.

Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:

<div class="image-wrapper">
   <img width="100%" src="..."/>
</div>

image would be resized per its original ratio with the width change of image-wrapper