HTML CSS - I'm having trouble resizing the image

Question

I have a design like this:

The width and height codes I gave in the CSS part do not work. Why could it be?

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

Here, for your reference, I have copied the URL of the icons. I noticed that the height you were trying to set for the icons was more than the actual height of the image. That's why it was not stretching in terms of height. However, if you give a border to your image tag, you may see that the image tag's height is increasing. SO CSS is working, but your image is not allowing you to increase its height. If you want more clarifications, please do tell me. Also, try to run the snippet below or copy it somewhere for experimenting. The image URL is allowing height manipulation.

Answer 2

Expanding on both Meet Bhalodiya and computercarguy's answers with an example, why not supply the same width as the height?

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

Link to JS Fiddle