2

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

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

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%;
}
4

1 回答 1

1

您可以设置图像的最大高度，例如。

因此，如果您设置图像的最大宽度，它不会褪色到设备宽度的 100%。

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

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

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

于 2015-03-26T13:31:07.753 回答