Skip to main content
jamieh2os
jamieh2os
Known Participant
December 15, 2018
Answered

image size on mobile

  • December 15, 2018
  • 2 replies
  • 902 views

Greetings Coding experts, thanks for looking at this post.

I’m trying to make the size of a coin appear its actual size on mobile, specifically I been testing with iphone6 plus.


The size of the coin image is 2000px.  The coin's actual dem's are 146px or 38mm; easily would fit on a iphone screen.

I specified 146px length and width properties on the image tag.  The image is accurate on desktop and ipads, but it scales down on iphone.

I have tried different containers, no containers, using vw and vh.  I can not get the image to show its real size on iphone.

In my last attemp I scaled down the original image 146px. (attached)  Iphone shrinks this image and of course it is very dim.

The meta tag is in the head.  Removing it increases the shrinking tremendously.

I'm trying to avoid media queries, calculating for every device ect.

Here is the file-code which I'm using for testing and is on server listed below code

Thanks for your suggestions…jw

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Untitled Document</title>

</head>

<body>

    <img src="1921Morgan.png" width="146px" height="146px" alt=""/>

   

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="js/popper.min.js"></script>

    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

HTML file on a remote server and the image below which is actual size:  

http://collection.fairwaysit.com/testpage.html

image:

This topic has been closed for replies.
Correct answer pziecina

With any 'actual' size image on the web, the word 'actual' should never be used. Maybe say 'approximate'?

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 16, 2018

You cannot predict what zoom level people are using to view your online images.  When I'm selling items, I like to shoot objects on a mat with a ruler to show its scale.   For smaller items, it's often necessary to zoom the camera lens in quite a bit to show details.  For larger items it's the opposite.  So the image is rarely if ever the item's actual size. 

Nancy O'Shea— Product User & Community Expert
pziecina
pziecina
Legend
December 15, 2018

Move the image size to css then specify the image size in mm.

so you would have -

img {

width: 38mm;

height 38 mm;

}

mm is a valid unit of measurement in css.

ALsp
ALsp
Legend
December 15, 2018

There might be issues with the size of the image canvas. I'm assuming that 38 millimeters is the radius of the actual coin, while the image of the coin might be different?

pziecina
pziecinaCorrect answer
Legend
December 15, 2018

With any 'actual' size image on the web, the word 'actual' should never be used. Maybe say 'approximate'?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices