html – Why does my image resize when its moved to the right?


When I move my image to the right it usually gets smaller by a decent amount. I use Visual Studio Code with the live server extension and I am a bit new to HTML and I am making test code to try to understand more things, so I am sorry if this is a simple error. The code for the button is here,

        <a href="#top" id="Top">
          <img
            src="./Images/24677-8-up-arrow-transparent-image.png"
            alt="go to top"
            style="width: 50%"
          />
        </a>
        <style>
          #Top {
            position: fixed;
            top: 90%;
            left: 95%;
          }
        </style>

and the entire project is

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Front page</title>
      </head>

      <body>
        <img src="./Images/Logo.png" alt="Logo" />
        <h3>logo</h3>
        <ul>
          <li><a href="index.html">Home Page</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Numbers.html">Numbers</a></li>
          <li><a href="index.html">Contact</a></li>
        </ul>
        <p style="width: 50%">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error porro
          accusantium ratione nam, voluptatum veniam laboriosam ullam explicabo
          perspiciatis harum deserunt doloremque, quidem corporis et nemo!
          Praesentium illo repellat totam obcaecati ipsam eos, deleniti placeat
          accusantium eligendi expedita similique iste voluptate dolorum sunt,
          animi sit impedit? Molestiae cupiditate, neque alias aut nisi
          reprehenderit, possimus voluptas, ad voluptate exercitationem
          excepturi iure ratione quaerat? Voluptatem quisquam ut recusandae
          necessitatibus sit harum officiis quod at illum, nemo dolorem quae
          libero corrupti consequuntur ipsum eaque aperiam minus blanditiis
          beatae. Voluptate, accusamus. Porro corporis ullam asperiores
          voluptates voluptatum id, reiciendis amet! Consequuntur, ea. Error
          consequuntur, recusandae aliquam facilis quibusdam facere a aspernatur
          tempora laboriosam neque placeat beatae ullam dignissimos esse aperiam
          quas. Accusamus eos quibusdam quia ut atque deleniti distinctio eaque,
          illo explicabo sapiente suscipit aut porro earum itaque qui obcaecati
          odit rerum, labore maxime impedit nam! Animi veritatis quam nesciunt
          est eos, provident optio in molestiae, alias magnam repellat
          necessitatibus voluptates aliquam odit temporibus. Quia exercitationem
          soluta itaque voluptates a ab!
        </p>
        <a href="#top" id="Top">
          <img
            src="./Images/24677-8-up-arrow-transparent-image.png"
            alt="go to top"
            style="width: 50%"
          />
        </a>
        <style>
          #Top {
            position: fixed;
            top: 90%;
            left: 90%;
          }
        </style>
      </body>
    </html>
  </body>
</html>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here