Question

我创建了一个页脚，将社交媒体符号显示为小的40px x 40px图像。但是，为了确保所有屏幕尺寸的页脚看起来相似，我想将像素高度和宽度更改为％高度和宽度。我尝试将<img>和<a>设置为width:100%和height:100%，但这只会创建一个更大的页脚。如何使用百分比大小的图像制作小页脚（最好，大小百分比的图像与40px x 40px图像大小相同）？

HTML：

 <footer>
    <div class = "footerTitle"> Check out Downtown Ithaca: </div>
    <ul> 
        <li> <a href="https://www.facebook.com/downtownithaca" target="_blank"><img class="footerImage" src="images/facebook.png" alt="facebook" width = "40"></a> </li>
        <li> <a href="https://twitter.com/downtownithaca" target="_blank"> <img class="footerImage" src="images/twitter5.png" alt = "twitter" width="40"></a></li>
        <li> <a href="https://www.youtube.com/user/downtownithaca" target="_blank"> <img class="footerImage" src="images/youtube.png" alt = "youtube" width="40"></a></li> 
    </ul>
  </footer>

CSS：

footer {
  position: relative;
  top: 0;
  left: 0;
  text-align: center; /*ensures text inside footer & ul is centered*/
}

.footerTitle {
  padding: 0.5% 0 0.1% 0; 
}

.footerImage {
  height: 40px;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0.5% 0;

}

footer li {
  display: inline-block;
  padding: 0.784% 2%;
}

Answer 1

如果要将页脚设置为较小的固定高度，则以高度和宽度的百分比设置图像是不好的，因为它不会将图像设置为完全显示为页脚。您可以为容器设置背景图像的中心，并设置为anchor标记。

我在这里更改了一些html元素，也请查看此jsFiddle

注意：我设置了固定位置的页脚用于显示目的，只有您可以根据需要进行设置。

<div class="footer">
    <a href="https://www.facebook.com/downtownithaca" target="_blank"><div class="icon facebook"></div></a>
    <a href="https://twitter.com/downtownithaca" target="_blank"><div class="icon twitter"></div></a>
    <a href="https://www.youtube.com/user/downtownithaca" target="_blank"><div class="icon youtube"></div></a>
    <div class="clear"></div>
</div>
<style>
    body{
        padding: 0;
        margin: 0;
        background-color: #c1c1c1;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background-color: #000;
    }
    a{
        text-decoration: none;
    }
    .footer .icon{
        width: 33%;
        height: 30px;
        float: left;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .clear{
        clear: both;
    }
    .facebook{
        background-image: url("https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/facebook-256.png");
    }
    .twitter{
        background-image: url("https://media.paper-republic.org/img/twitter.png");
    }
    .youtube{
        background-image: url("http://www.mofang.com.tw/statics/v4/tw_tyong/img/youtube_icon.jpg");
    }
</style>

Answer 2

您应该为页脚赋予动态高度，而不是给出子元素大小。

如何使用百分比大小的图像制作小页脚？

2 个答案: