크기가 작은 이미지로 작은 꼬리말을 만드는 방법은 무엇입니까?

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

꼬리표를 표로 표시하고 자식 표 셀을 만듭니다. 그래서 각 요소는 가운데 정렬됩니다. height 및 width 속성을 사용할 수 있도록 인라인 블록 이미지를 만듭니다. 도움이되기를 바랍니다.

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