Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

How to keep the original relative size of images

Avatar of Peter Kroman
Peter KromanFlag for Denmark asked on
CSSHTML
5 Comments1 Solution127 ViewsLast Modified:
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;
}

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>