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

user_16662869 0
Viewed 47

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>
css html
2 Answers

Try this! it is exactly what you wanted. Let me know if this works. 

html {
  scroll-behavior: smooth;
}

.back-to-top {
  width: 50px;
  height: 50px;
  position: fixed;
  
  /* To Center Arrow inside anchor tag */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* To Align it Bottom Right */
  right: 2rem;
  bottom: 2rem;
  
  /* So it will not hide under any element */
  z-index: 9999; /* Always give it the highest z-index */
  
  /* Styling */
  background-color: #e6e6e6;
  border-radius: 50%;
}
<img src="" alt="website-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 class="website-content">
  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" class="back-to-top">
  <!-- I recommend you using SVG instead of PNG -->
  <svg xmlns="http://www.w3.org/2000/svg" fill="black" width="24" height="24" viewBox="0 0 24 24"><path d="M11 8.414V18h2V8.414l4.293 4.293 1.414-1.414L12 4.586l-6.707 6.707 1.414 1.414z"></path></svg>
</a>

user_157482780

If I'm not wrong to understand your question, here is my little advice.

Try this code in Head to move the image to right:

<style>
  img {
   float: right;
  }
</style>

I hope this works. If it's not working, I am Sorry .

user_160179400
Related