PNG изображения отказываются изменять размер?

Question

Полностью застрял на этом ... Я пробовал различные ограничения max-width и max-height, а также авто значения.

Не знаю, что меня удерживает. Вот осуществляется код:

<div class="copybar"> 
    <ul> 
     <li id="copy-credit"><h3>Copyright 2016: </h3><a id="credit-animate" href="https://google.com">Zach Curtis</a></li> 
     <li id="social-icon"><a href="https://facebook.com"><img class="icon-img" src="images/iconfb.png"></a></li> 
     <li id="social-icon"><a href="https://instagram.com"><img class="icon-img" src="images/iconinsta.png"></imgc></a></li> 
     <li id="social-icon"><a href="https://twitter.com"><img class="icon-img" src="images/icontwit.png"></a></li> 
    </ul> 
</div> 

CSS:

.copybar { 
background-color: darkslategray; 
display: inline-block; 


} 

.copybar ul { 
list-style: none; 
margin-left:10%; 
margin-right:10%; 
} 

#copy-credit { 
display: block; 
float: right; 

} 

#social-icon{ 
display: block; 
float: left; 
max-width: 25%; 
height:auto; 
} 

.icon-image{ 
max-width:25%; 
height: auto; 
} 

Answer 1

Ваш класс объявлен как icon-image в вашем CSS, но указан как icon-img в вашем HTML-коде.

Answer 2

<li id="social-icon"><a href="https://twitter.com"><img class="icon-img" src="images/icontwit.png"></a></li> 

имеет имя класса .Icon-IMG и вы пытаетесь изменить имя класса .Icon-Image

.icon-image{ 
max-width:25%; 
height: auto; 
} 

Изменение на:

.icon-img{ 
max-width:25%; 
height: auto; 
}