HTML我在调整图像大小方面有问题

Question

我有一个这样的设计：

​

​

我在CSS部分中提供的宽度和高度代码不起作用。为什么会是？

​

.social-media {
    height: 165px;
    width: 35px;
}

<li>
    <a href=""><img class="social-media" src="./img/gmail.png"></a>
</li>
<li>
    <a href=""><img class="social-media" src="./img/facebook.png"></a>
</li>

​

Answer 1

​

.social-media {
    height: 35px;
    width: 35px;
}

<li>
    <a href=""><img class="social-media" src="https://img.icons8.com/fluency/512/gmail.png"></a>
</li>
<li>
    <a href=""><img class="social-media" src="https://img.icons8.com/fluency/512/facebook-new.png"></a>
</li>

​

这里，供您参考，我已经复制了图标的URL。我注意到，您试图为图标设置的高度比图像的实际高度还要高。这就是为什么它在高度上没有伸展。但是，如果您给图像标记一个边框，您可能会看到图像标记的高度正在增加。所以CSS是工作的，但你的形象不允许你增加它的高度。如果您需要更多的澄清，请告诉我。另外，试着运行下面的代码片段，或者将其复制到某个地方进行实验。图像URL允许高度操作。

Answer 2

用一个例子扩展会见Bhalodiya和电脑车夫的答案，为什么不提供与高度相同的宽度？

.social-media {
    height: 165px;
    width: 165px;
}

链接到JS Fiddle