Элемент фиксированного выравнивания Img слева

Question

Я пытаюсь, чтобы элемент изображения имел фиксированное выравнивание, независимо от размера экрана. Я хочу, чтобы он остался налево. Я пробовал много вещей, в том числе float, horizontal-align и margin-left, но это жестко закодированные значения, и я хочу, чтобы решение обеспечило, чтобы изображение привлекательно оставалось налево, независимо от размера экрана. Любая помощь будет оценена по достоинству.

Вот мой HTML:

<img class="profile" src="image.jpg" /> 

и вот мой CSS:

.profile { 
position: absolute; 
height: 400px; 
width: 400px; 
margin-left: -300px; 
top: 100px; 
} 

Это может быть также стоит отметить, что не существует никаких элементов помимо IMG на этой странице.

Answer 1

использование position: fixed;

html,body{ 
 
    height: 1300px; 
 
} 
 

 
.profile { 
 
    position: fixed; 
 
    height: 400px; 
 
    width: 400px; 
 
    margin-left: -300px; 
 
    top: 100px; 
 
}

<img class="profile" src="image.jpg" />

Поместите <img> тег под body