How to keep the original relative size of images

Hi,

I have a number of images that together form a perfect map. I need to upload and position these images individually, because I want to be able to use every single image as a link. It is some puzzle to get the images positioned, but it is possible :)

My problem is that the images does not maintain their relative sizing according to the originals when uploaded and displayed on the page.

I am sure that it is because I am missing something in the CSS settings. But what ??

I have these global CSS settings for the images:
   .container .image {
    position: relative;
    background-color: transparent;

}

.container:hover .image  {
    background-color: cornflowerblue;
    opacity: 0.9;
}

Open in new window


and the HTML for the images is this:
            <div class="w3-row" style="margin-left: -100px;">

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Hjørring.png" style="margin-top: 30px; margin-left: 283px; width: 100%; height: 100%; " alt="Hjørring" class= "image"> 
                </div>   
                </div>  

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Aalborg.png" style="margin-top: 110px; margin-left: 134px; width: 100%; height: 100%; " alt="Aalborg" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Thisted.png" style="margin-top: 121.5px; margin-left: -72.5px; width: 100%; height: 100%; " alt="Thisted" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Ringkøbing.png" style="margin-top: 192px; margin-left: -215px; width: 100%; height: 100%; " alt="Ringkøbing" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Viborg.png" style="margin-top: 175px; margin-left: -285px; width: 100%; height: 100%; " alt="Viborg" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Randers.png" style="margin-top: 200px; margin-left: -317.5px; width: 100%; height: 100%; " alt="Randers" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Århus.png" style="margin-top: 200px; margin-left: -110px; width: 100%; height: 100%; " alt="Århus" class= "image"> 
                </div>   
                </div>

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Skanderborg.png" style="margin-top: 229px; margin-left: -625px; width: 100%; height: 100%;%alt="Skanderborg" class= "image"> 
                </div>   
                </div>
        </div>        

Open in new window

Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Hey Peter,

Nothing in your CSS should have any bearing on image size.

What is likely to have an effect is the width and height that you're adding to the container elements and the internal DIVs. You're setting these to 10%.

Also, trying to accuarately position elements using margins (particularly negative margins) will cause you no end of trouble. If you want to accurately position an element, then use the position CSS, for example.

position:absolute;
top: 124px;
left: 47px;

Let us know more about what you're trying to achieve and we might be able to offer some suggestions on the way forward.
0
Peter KromanSales ExecutiveAuthor Commented:
Well - I can see that I can't do it this way. When I scale the browser the individual images float around like ducks in a pond :)

What I really want is this:

I have this map showing the counties of Denmark at a given time in history. I need to be able to mark every county as an individual link. I thought that I could do that by using individual images and position them relative to each other, but it seems that I have to give up on that idea,

It there any other way that I can do that?

Sk-rmbillede-2017-10-31-09.52.06.png
0
Chris StanyonWebDevCommented:
Aside from scaling issues, your idea won't work because Images are rectangular and so would need to stack on top of each other to line up. This would prevent your individual links from working the way you want.

If you just want to break an image up into several different links, then using an Imagemap is the way to go. Basically, it allows you to draw 'areas' over the image  - each with it's own link. Here's the example from the W3Schools:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 

Open in new window

You can draw shapes as retangles, circles or polygons (likely to be the one you need) and there are online generators to help you create your map. It's not going to be easy, and it's a basic solution so you may need to look around for alternatives
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Chris,

I am now working with SVG paths. Let's see where that brings us :)
0
Chris StanyonWebDevCommented:
OK Peter. No worries.

SVG Paths are still  images though so you may run into simliar problems with that approach as you do with your PNG images.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.