Question

完全坚持这一点...我已经尝试过各种最大宽度和最大高度以及自动值。

不知道是什么阻碍了我。这是受影响的代码：

<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

您的类在CSS中声明为icon-image，但在HTML中引用为icon-img。

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

PNG图片拒绝调整大小？

2 个答案: