Remap html image links + fit to screen + max height and width

Ok, sorry guys that was big title. But most of the title explains what I need.

I have a HTML page that will display a image onto the screen. And basically it is on fullscreen (big problem on very wide screens), and I am using: https://github.com/davidjbradshaw/imagemap-resizer To resize the map I have created.

Here is my code in HTML:

    <body>

    <img id="imgg" src="imgs/SampleImage.png" height="100%" width="100%" style="max-height:1414px; max-width:1414px;" alt="Page" usemap="#image_map" border="0">

    <map name="image_map" id="image_map">
        <area shape="poly" coords=" 104,693, 250,702, 219,1203, 105,1208, 105,692" href="http://wordpress.com" alt="Blog"/>

        <area shape="poly" coords=" 376,879, 521,880, 522,1035, 375,1037, 375,880" href="https://www.facebook.com/" alt="Facebook Page"/>
        <area shape="poly" coords=" 558,882, 705,883, 705,1036, 563,1036, 559,885" href="https://www.facebook.com/" alt="Facebook Page"/>

        <area shape="poly" coords=" 364,1045, 716,1047, 710,1082, 370,1085, 367,1044" href="https://twitter.com/" alt="Twitter Page"/>

        <area shape="poly" coords=" 294,1036, 344,1055, 361,1035, 368,917, 370,901, 310,916, 297,945, 292,978, 290,1037, 301,1037" href="https://www.pinterest.com/" alt="Pinterest"/>

        <area shape="poly" coords=" 529,898, 555,898, 551,1017, 536,1021, 531,901" href="https://www.pinterest.com/" alt="Pinterest"/>

        <area shape="poly" coords=" 718,1033, 715,904, 771,922, 789,1037, 744,1050, 722,1033" href="https://www.pinterest.com/" alt="Pinterest"/>
    </map>

</body>

<!--[if lte IE 8]>
    <script type="text/javascript" src="js/ie8.polyfil.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/imageMapResizer.min.js"></script>
<script type="text/javascript">

    $('map').imageMapResize();

</script>

I just want the image to display on the page, but after a certain height (the images max-height and max-width) it should not allow the image to be stretched anymore and instead display a background colour.

I have also in the "style" section of my img tag tried to use the max-height and max-width properties. Did not work. And the height="100%" and width="100%" is there to make sure the image doesn't look too big, this is a 1000x1000 picture, so on smaller devices they would have to scroll, that's why I used this. Thank you everyone for the help!

Solution

Ok, looks like no one was able to help. But I figured it out myself!

So I will share the secret with everyone. Basically its not really a secret, I used a dirty little javascript trick instead of a html/css trick. It will look at the image heights, check whether the height is smaller than the width or if the width is smaller than the height and set either one to the smaller height. So for example: Height = 1000px width = 800px

Now the JavaScript code will check which one is smaller, then set the height/width to the smaller size (keep in mind this is a SQUARE image): height = 800px width = 800px

And here is the code:

    <script>
var img = document.getElementById('imgg'); 
var width = img.clientWidth;
var height = img.clientHeight;

if (width < height) {
img.style.height=width;
}

if (height < width) {
img.style.width=height;
}

</script>