Search code examples
htmlcssimage-scaling

I can't get images to the same size [HTML/CSS]

I have two pictures that have 512px in height and 512px in width. Whatsoever the plus symbol is bigger than the shutdown button.

HTML:

<div class="logout">
    <a href="someLink"> 
      <img name="logout" alt="logout" src="red_shutdown.png">
    </a>
  </div>

  <div class="plus-symbol">
    <img name="plus" alt="create-post" src="plus-symbol.png">
  </div>

CSS:

div.logout {
  position: fixed;
  bottom: 10%;
  right: 1.32%;
  border: 0;
}
div.plus-symbol {

  position: fixed;
  bottom: 10%;
  right: 1.32%;
  border: 0;
}
Solution

  • You can just make the parent tag of 512*512. then just make the image to be width:100%; height:100%;

    Also check from inspect if the images are overflowing or not if yes then overflow:hidden