Scaling images inside div when page is shrunk

Question

Been trying to get these to scale, they need to stay on the same line and then scale. I got the top image on the page and everything else to scale just not these images. Any help would be greatly appreciated, thanks in advance.

Contact Page

<div id="bannerImage">
   <div id="bannerImage1"><img src="../Assets/Pictures/Golden Wand/CutOut/Tools.png" width="auto" height="200px" alt="Tools"></div>
   <div id="bannerImage2"><img src="../Assets/Pictures/Golden Wand/CutOut/Angled Truck.png" width="auto" height="200px" alt="Truck"></div>
</div>

CSS Style Sheet

div#bannerImage {border:solid purple;
    width:100%;
    height:222px;
    display:table;
}

div#bannerImage1 {border:solid red;
    position:relative;
    float:left;
    margin-top:7px;
    margin-left:130px;
    max-height:200px;
    max-width:40%;
    display:table-cell;
}
#bannerImage1 img{
    position:relative;
    max-width:auto;
    max-height:100%;
}
div#bannerImage2 {border:solid blue;
    position:relative;
    float:left;
    margin-top:7px;
    margin-left:150px;
    max-height:200px;
    max-width:50%;
    display:table-cell;
}
#bannerImage2 img{
    position:relative;
    max-width:auto;
    max-height:100%;
}

Answer 1

I ended up finding the answer over here on StackOverflow it was answer by Omega and they provided an example using jsfiddle.net