How to make .png images the same size in html

Question

I have the following code set for 2 different images on my site.

Boys logo:

<img src="logo.png" width="100" height="100" alt="HTML tag" style="max-width: 100; max-height: 100;">

Girls logo:

<img src="girlslogo.png" width="100" height="100" alt="HTML tag" style="max-width: 100; max-height: 100;">

I have set them both to be the same size but they girls logo looks much bigger. I have uploaded it to my site. Look at the girls logo here and the boys logo here the logo is at the top left corner of the screen. I have set a max height and width to both of them. Why isn't it capping the images?

Answer 1

Your Boys logo image contains white space around it thats why it appears to be smaller than girls logo.

You can see for it yourself by running the code below or looking at the image result attached below.

If you want to use the same logo without the whitespace you can extract the foreground of the image using this website and then download it back as a png which now you can use in your html.

<img src="https://acanhs.org/logo.png" style="border:2px solid black" width=100 height=100/>
<img src="https://acanhs.org/girlslogo.png" style="border:2px solid black" width=100 height=100/>

https://i.sstatic.net/Jj4WB.jpg

Answer 2

Look, your logo has whitespace around it.