CSS圖片切換遺址內聯dipslay

Question

ul, li { 
display: inline; 
list-style: none; 
margin: 0px; 
padding: 0px 20px; 
} 

#footer { 
margin: 10px auto 0px auto; 
text-align: center; 
width: 50%; 
clear: both; 
} 

#footer .social { 
margin: 0px auto 0px auto; 
padding-top: 60px; 
} 

#footer img { 
border-radius: 5px; 
box-shadow: 0 8px 6px -6px black; 
align: bottom; 
width: 50px; 
transition:width 1s; 
-moz-transition:width 1s; /* Firefox 4 */ 
-webkit-transition:width 1s; /* Safari and Chrome */ 
-o-transition:width 1s; /* Opera */ 
} 

#footer img:hover { 
width:60px; 
} 

---

<div id="footer"> 
    <div class="social"> 
     <ul> 
      <li><a href="http://facebook.com/dwpirat"><img src="facebook_logo.png"></a></li> 
      <li><a href="http://twitter.com/#dwpirat"><img src="twitter_logo.png"></a></li> 
     </ul> 
    </div> 
</div> 

http://jsfiddle.net/DvVug/2/

爲什麼是它的形象在錯誤的方向導致相鄰圖像去低膨脹？我只是想讓它向上擴展。

預先感謝您。

Answer 1

http://jsfiddle.net/DvVug/4/

CSS變換的規模和改造的起源是什麼烏爾尋找

這是最快的解決方案 u能解決，但沒有點真 希望這有助於

#footer img { 
border-radius: 5px; 
box-shadow: 0 8px 6px -6px black; 
align: bottom; 
width: 50px; 
transition:all 1s; 
-moz-transition:all 1s; /* Firefox 4 */ 
-webkit-transition:all 1s; /* Safari and Chrome */ 
-o-transition:all 1s; /* Opera */ 
transform-origin:50% 100%; 
-ms-transform-origin:50% 100%; /* IE 9 */ 
-webkit-transform-origin:50% 100%; /* Safari and Chrome */ 
-moz-transform-origin:50% 100%; /* Firefox */ 
-o-transform-origin:50% 100%; /* Opera */ 
} 

#footer img:hover { 
transform: scale(1.2,1.2); 
-ms-transform: scale(1.2,1.2); /* IE 9 */ 
-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */ 
-o-transform: scale(1.2,1.2); /* Opera */ 
-moz-transform: scale(1.2,1.2); /* Firefox */ 
} 

Answer 2

只需將vertical-align: top添加到圖像。這會導致它向下而不是向上，這似乎是你想要的（你也可以嘗試vertical-align: middle）。

http://jsfiddle.net/ExplosionPIlls/DvVug/3/