Question

我目前正在制作一个响应式页脚，一旦屏幕尺寸缩小到平板电脑和手机，我正在努力获得正确的图像以保持比例图像尺寸。

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

<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

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

因此，如果您设置图像的最大宽度，它将不会淡化为100％的设备宽度。

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

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

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

平板电脑和手机上的图像会扩大而不是缩小？

1 个答案: