html - img 元素固定对齐左

Question

我试图让图像元素具有固定的对齐方式，无论屏幕尺寸如何。我想让它留在左边。我已经尝试了很多东西，包括 float 、水平对齐和左边距，但这些都是硬编码值，我想要一个解决方案，无论屏幕尺寸如何，都能确保图像保持在左边。任何帮助将不胜感激。

这是我的 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