0

So basically i want to make my home picture looks the way it should look.

This is the correct size the picture should be

Correct Picture

enter image description here

But when i minimize the browser the picture looks offset

Offset Picture

enter image description here

Heres the code on the picture Class

.center {
      display: block;
      margin-left: auto;
      margin-right: 18%;
      margin-top: 5%;
      max-width: 500px;
      height: auto%;
    }

how i input the picture on the main code

<div>
  <img src="ImageHome.png" alt="HomeImage" class="center">
</div>
Macchiato
  • 501
  • 1
  • 7
  • 12
  • We’d need to see more of your HTML structure. For example we don’t know how the div is sized, and is the img to stay the same absolute size regardless of viewport size? – A Haworth Jan 27 '22 at 04:34

1 Answers1

0

Use viewport width in order to keep image with same size in reference to window.

.center {
  display: block;
  margin-left: auto;
  margin-right: 18%;
  margin-top: 5%;
  max-width: 500px;
  width: 20vw; /*Just a guess, use the size that you want*/
  height: auto%;
}

Also, if you wanna be really precise with the exact place of the image in reference to the rest of the page (margins) independently of window size , you should use viewport width to the margins too. Using percentage means that you are resizing it in reference to it's parent element, not the window.

You can read this thread for more info about viewport and % and look at this article here for more info about viewport.

Joao Soares
  • 71
  • 7