0

I have an image like this one: link and I want that the size of the image is always "real", usually i don't work with graphic because I'm not able to do that, but it is an important thing for one of my customer. I guess it depends on the dpi of the image...so I asked to a designer to make some image with different dpi settings, and he sent me the one of the link. But it isn't of the right size. Can You give me some info about that? Even if it is a possible thing..

(Sorry for my bad English as always, i'm studying!)

gattass69
  • 101
  • 1
  • 12

2 Answers2

0

Browsers don't generally deal with "real" sizes when working with images; they use pixels.

As a kludge, you could store some sort of database (nothing as complicated as SQL unless you're already using it; JSON or XML will do) containing the URLs and the true image size. Then you could just do something like:

var image = document.getElementsByTag("img")[0];
var true_size = lookup(image.getAttribute("src"));
image.style.width = true_size["width"] + "in";  // Or whatever unit
image.style.height = true_size["height"] + "in"; // Or whatever unit

If you can do this server-side, with the style="" attribute, even better!

Adding this <meta> tag, found here, should cause the emulated in to correspond to the true screen width:

<meta name="viewport" content="target-densitydpi=device-dpi" />

Support for this varies wildly (or so I've heard) so it might not work, but it should be enough to satisfy this request considering that it's instructing the web browser to display this at the right width and height.

wizzwizz4
  • 6,140
  • 2
  • 26
  • 62
  • thank You for your answer wizzwizz4, now i'll try with some real ring in the next days and then i'll came here for the right answer, – gattass69 Apr 06 '18 at 16:38
  • @gattass69 If this answer works, don't forget to click the green tick to mark the question as answered. – wizzwizz4 Apr 06 '18 at 16:42
0

Use css height and width.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • if you open the link and you try to set height and width to auto as you can see it won't work anyway...what i need is that the circle is of 16,9mm in any screen.. – gattass69 Apr 06 '18 at 16:18
  • You can use mm units. Maybe i don't understand the problem – A. Meshu Apr 06 '18 at 16:20
  • I think i can't explain it well maybe :P anyway your solution for the units and the one of wizzwizz for the viewport will solve my problem, i'll try in the next day, thank you for now! – gattass69 Apr 06 '18 at 16:39
  • Ok.. Good luck! – A. Meshu Apr 06 '18 at 17:00
  • I'm waiting tomorrow for the designer, which wan't to test it in some different phone with a caliber because the size is millimetric, i'll come here then don't worry! – gattass69 Apr 08 '18 at 15:15
  • i haven't solved, also if i use the size in mm in the css the images are displayed too little.. – gattass69 Apr 18 '18 at 13:00
  • Sorry - i missed your comment. I can't understand what is the problem. If you haven't fix it - can you provide some HTML code in order to update my answer: The part that will contain the original image shown to end user. – A. Meshu Apr 21 '18 at 22:16