1

So I found a bunch of images which I cant display in the correct way.

We have this very simple example:

<body>
    <img src="http://vignette2.wikia.nocookie.net/runescape2/images/4/47/Santa_hat.png/revision/latest?cb=20111128052051" />
</body>

This particular image has (or should have) the dimensions 28x23, although when running this snippet in your browser it gets resized.

I think this lot of images has some format issues which prevent me from displaying them on their true dimensions.

The only way I've had this working is by assigning custom properties width and height, but the problem is im loading these images dynamically using JavaScript so I dont have the dimensions of these images. I've tried retrieving the dimensions, see for instance this SO answer:

Get width height of remote image from url

but that gave the scaled dimensions as they appear on the webpage after it's loaded (200x164?).

I'm unsure why this is happening and how I could load these images using the correct dimension.

Also: putting this in a jsfiddle (link) does seem to use the right dimensions.

edit: (im editting this so it can get a bump)

Community
  • 1
  • 1
Flame
  • 6,663
  • 3
  • 33
  • 53
  • 1
    I think it's an issue with your web browser or host server. I don't get this issue at all, even on my own server or on localhost. – Cyxo Jan 04 '16 at 19:28
  • 1
    do you have any idea where to start? My serv is XAMPP using Apache 2.4.17. I hosted this snippet on my external domain and it still occurred. I'd almost say this has something to do with my router because you guys dont seem to get the issue – Flame Jan 04 '16 at 19:58
  • 1
    Well if it occurs on every of your web browser and that it even doesn't obey to a CSS rule, it may be a serious issue with your computer. Have your tried to load it on another device ? Can you send us a link of the version hosted on your server ? – Cyxo Jan 04 '16 at 20:03
  • You can also try `width` and `height` HTML attributes (but I think you already did) – Cyxo Jan 04 '16 at 20:04

2 Answers2

1

Are you trying to upscale the image as you embed them into your webpage? Or does it seem the browser automatically re-sizing them?

Edit: What browser are you using? Are you using a development environment like dreamweaver?

EDIT AGAIN: I am also having no problems with this, it's likely your browser at this point

A metal chair
  • 51
  • 6
1

You might have some site-wide img css proprieties. You could assign all of these image tags a class like image-load, and have a css property to force them to use auto for both height and width.

.image-load { height : auto !important; width: auto !important; }
Marius Ilie
  • 220
  • 2
  • 13
  • 1
    nope doesnt budge. I tried this already, it still scales. Note that other images like http://findicons.com/files/icons/2354/dusseldorf/32/pen.png do seem to work properly – Flame Jan 04 '16 at 19:38