HTML CSS - I'm having trouble resizing the image-CodePudding

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  src="./img/gmail.png"></a>
</li>
<li>
    <a href=""><img  src="./img/facebook.png"></a>
</li>

CodePudding user response：

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

     

<li>
    <a href=""><img  src="https://img.icons8.com/fluency/512/gmail.png"></a>
</li>
<li>
    <a href=""><img  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.

CodePudding user response：

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