图片在平板电脑上会扩大而不是缩小，phone？

Question

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

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

<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/

图片在平板电脑上会扩大而不是缩小，phone？

Image expands rather then reducing on tablet and phone?

html

css

business-catalyst

responsive-design