Skip to main content
V
VideoEditor20
Participant
June 21, 2020
Question

Need Help With Display Sizing

  • June 21, 2020
  • 3 replies
  • 421 views

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. 

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 21, 2020

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

 

Example:

 

 

<!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
O
osgood_
Legend
June 21, 2020

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/ 

    pziecina
    pziecina
    Legend
    June 21, 2020

    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.

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