Img元素固定对齐左

Question

我正在尝试让图像元素具有固定的对齐方式，无论屏幕大小如何。我希望它留下来。我尝试了很多东西，包括float，horizo​​ntal-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

下