Highlighted

image size on mobile

Community Beginner ,
Dec 15, 2018

Copy link to clipboard

Copied

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:1897actMorgan.png

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

TOPICS
Learn Dreamweaver

Views

470

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

image size on mobile

Community Beginner ,
Dec 15, 2018

Copy link to clipboard

Copied

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:1897actMorgan.png

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

TOPICS
Learn Dreamweaver

Views

471

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 15, 2018 0
LEGEND ,
Dec 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2018 1
Mentor ,
Dec 15, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2018 1
LEGEND ,
Dec 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2018 1
Mentor ,
Dec 15, 2018

Copy link to clipboard

Copied

Yeah 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2018 0
Adobe Community Professional ,
Dec 15, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 15, 2018 1