• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Need Help With Display Sizing

New Here ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

Hi there, I need help with something.

I have probably 50 images that were done via screenshot on my monitor which is a 32" 

Screen Size 32 in
Resolution 1080p HD
Native Resolution 1920 x 1080
Aspect Ratio 16:9

 

Basically I took each of those images and made an html file with each one and have set coordinates so when you click on a particular part of an image, it goes to the next html file which contains another image file.

 

My only problem is on my computer it's perfect, but I'm sending this to my work colleagues and some of them are using a work from home laptop which also has a resolution of 1920x1080, 

  Type:  14" - IPS

  Resolution:  1920 x 1080 (Full HD

  Widescreen:  Ye

  Image Aspect Ratio:  16:9

 

On their computer, you have to scroll from left to right on each page, I realize it's because the image itself would have been too big as the screengrabs were done from my monitor. I have a warning message no the first page telling them to zoom out to 80% (then I don't have to fix each image). But, even on the first page with the warning image, nothing I do will get rid of the scrolling or even close to it no matter what I do - I tried resizing the image to 1920x1080, I saw that if I go under 'live' i can see where it cuts off in dreamweaver, which is exactly where it cuts out on the colleagues' display, but I see no option there to fix it. I also tried to reduce the image size by 50% and that did nothing either to my surprise. 

TOPICS
Browser , Code , How to

Views

245

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
community guidelines
LEGEND ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

You are trying to build a page using images with hotspots?

 

If you did the images via the computers built in screen shot, then they will also include meta-data such as the image size in inches, along with the resolution data of the monitor.

 

What you will have to do is use image editing software, (such as photoshop) to resize, (and resample) the image to the desired size in pixels. Then recreate the image hotspots as desired, (this would not allow the page/image to resize to any other viewport though).

 

It is possible to simply use css to set the image to fit any viewport size, but as you are also using hotspots, (not recommended anyway) the co-ordinates for the 'hit' areas would not be correct except at the original size of image they where crated at.

Votes

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
community guidelines
LEGEND ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

Sounds to me like you are using fixed sized images instead of responsive images which will scale in all devices/screens widths.

 

The other problem you are probably using 'image-maps' to designate hotspots on the images which are not responsive.

 

Below is a link to a 'fiddle' by one of the regaular forum contributors showing how to combine a responsive image and hotspots:

 

https://jsfiddle.net/NancyO/6k3v4ge1/19/ 

Votes

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
community guidelines
Community Expert ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

LATEST

Did you build your HTML pages responsively to fit ALL devices?

 

Example:

 

CSS FlexboxCSS Flexbox

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered, CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**Default mobile-first**/
.flex-container {
display:flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

.flex-container > div {
width: 95%;
padding: 0.5%;
font-size: 1.25rem;
border:2px solid teal;
}

/**responsive image**/
.flex-container img { max-width: 100% }

figure, figcaption {text-align:center;
margin: 0 auto;}

/* Media query for tablets & desktops */
@media only screen and (min-width: 680px) {

.flex-container {
display:flex;
flex-flow: row wrap;
align-items: center;
}

.flex-container > div {
width: 40%;
}
}
/**end of media query**/
</style>
</head>
<body>
<h1>Flexbox Vertically Centered</h1>

<div class="flex-container">
<div>
<figure>
<img src="https://dummyimage.com/1920x1080" alt="placeholder">
<figcaption>Caption</figcaption></figure>
</div>

<div><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure enim error sit quisquam ut, id, eveniet omnis repellat qui esse nam quae laborum modi voluptatum. Impedit nostrum unde, aliquam molestiae?</p></div>
</div>
<hr>
<!--second row-->
<div class="flex-container">
<div>
<figure>
<img src="https://dummyimage.com/1920x1080" alt="placeholder">
<figcaption>Caption</figcaption></figure>
</div>

<div><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure enim error sit quisquam ut, id, eveniet omnis repellat qui esse nam quae laborum modi voluptatum. Impedit nostrum unde, aliquam molestiae?</p></div>
</div>
</body>
</html>

 

Post back if you have any questions.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines