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>        
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros