Image expands rather then reducing on tablet and phone?

Question

I am working on a responsive footer at present, I am trying to get the right image to keep a proportional image size once the screen size reduces to tablet and phone.

At present it expands to fill the screen width rather then reducing?

https://jsfiddle.net/9z90oakw/

<div id="footerDecor"></div>
<div id="footerWrapper">

<div id="footer">

<p class="footerStatement">MOTIVATE, INSPIRE & EDUCATE</p>

<div class="footerFloat">
<h4>Header 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<img class="footerImg" src="http://kimoswimnew.businesscatalyst.com/images/splash_icon.png">
</div>

<div id="copyrightInfo">
<p class="footInfo">© 2014 Kim O Swim. All Rights Reserved.&nbsp;|&nbsp;Site and brand design by <a href="http://www.transitiongraphics.co.uk">Transition Graphics</a></p>
</div>

</div>

</div> <!-- end footerWrapper -->

/*----- FOOTER -----*/
#footerDecor {
    background: url(http://http://kimoswimnew.businesscatalyst.com/images/wave-footer.png) center repeat-x;
    background-position: 0 0;
    width: 100%;
    height: 10px;
}
#footer p.footerStatement {
    font-size: 2.5em;
    padding-bottom: 0.625em;
    line-height: 1em;
    margin-left: 2%;
}
#footerWrapper {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 18px;
    background-color: #333333;
    width: 100%;
    overflow:hidden;
    padding: 40px 0 40px 0;
}
#footer {
    width: 100%;
    margin: auto;
}
.footerFloat {
    width: 100%;
    margin-bottom: 15px;
    }
@media all and (min-width: 960px) {
#footer {
    width: 960px;
    margin: auto;
} 
.footerFloat {
    width: 23%;
    float: left;
    margin-left: 2%;
}
}
#copyrightInfo {
    width: 960px;
    float: left;
    margin-left: 2%;
}
#copyrightInfo a:link, a:visited  {
    color:#fff;
    text-decoration: underline;
}
#copyrightInfo a:hover, a:active {
    color:#A6C33E;
}
.footerImg {
    width: 18%;
    margin-left: 2%;
    margin-bottom: .5em;
    float: left;
}
img.footerImg {
    width: 100%;
}

Answer 1

You can set maximum height of an image like.

SO if you set max-width of an image it wont fade to 100% of device width.

for example i have set max width to 210px, that is original of an image.

img.footerImg {
    width: 100%;
    max-width:210px;
}

See updated code here: https://jsfiddle.net/9z90oakw/1/