パーセンテージサイズの画像で小さなフッターを作成するにはどうすればよいですか？

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

あなたのフッターに代わり、子要素の大きさを与えるダイナミックな高さを与える必要があります。

Answer 2

小さな固定高さでフッターを設定する場合は、画像をフルディスプレイでフッターに設定しないため、高さと幅のパーセンテージで画像を設定するのは良いことではありません。コンテナの背景画像の中心を設定し、anchorタグに設定することができます。

また、私はこのjsFiddle

ノートで確認し、ここにいくつかのHTML要素を変更している：私は表示目的のために固定位置とフッターを設定しただけ、あなたの要件ごとにそれを設定することができます。

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

フッターを表の表示にして、子の表セルを作成します。各要素は中央揃えになります。それは、高さと幅のプロパティができるようにインラインブロックの画像。それが役に立てば幸い。

<style> 
footer { 
display : table; 
width: 100%; 
height : 60px; 
} 
footer > div { 
display : table-cell; 
vertical-align :middle; 
} 
footer > div image { 
display : inline-block; 
width : 50%; 
} 
</style> 
<footer> 
<div> text goes here </div> 
<div> Image goes here </div> 
</footer>