html - 图像在平板电脑和手机上扩大而不是缩小？

Question

我目前正在开发响应式页脚，我正在尝试获取正确的图像，以便在屏幕尺寸缩小到平板电脑和手机时保持比例图像大小。

目前它会扩展以填充屏幕宽度而不是缩小？

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

您可以设置图片的最大高度。

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

例如我将最大宽度设置为210px，这是图片的原始宽度。

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

请在此处查看更新代码:https://jsfiddle.net/9z90oakw/1/