在线-带视口的头像图像

Question

我正在为这个项目使用视口以便响应。

我想在右上角有一个头像显示用户头像和一个绿色圆圈表示他在线。

问题是我无法使圆圈响应如果我增大或减小圆圈的大小，圆圈就会移动。几张图片：

大

小

HTML:

<body>
<img class="img-header" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png">

<p>Username</p>

<img class="online" src="http://www.clker.com/cliparts/e/E/F/G/p/g/alex-green-circle-md.png">
</body>

CSS:

.img-header {
position: relative;
margin-top: 0vw;
margin-right: 4vw;
float: right;
object-fit: cover;
border-radius:50%;
width: 7vw;
height: 7vw;
}

p{
float: right;
text-transform: bold;
margin-top: 1vw;
margin-right: 2vw;
display: inline;
font-size: 4vw;
}

.online {
width: 2vw;
position: absolute;
padding-left:92vw;
}

JSFiddle

Answer 1

用 div 包裹图像和绿色图标图像，然后为绿色图标添加 right 和 top 值而不是 padding。

现在无论大小都会在同一个地方，代码如下：

.img-header {
    position: relative;
    margin-top: 0vw;
    margin-right: 4vw;
    float: right;
}
.img {
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: super;
}
p {
    float: right;
    text-transform: bold;
    margin-top: 1vw;
    margin-right: 2vw;
    display: inline;
    font-size: 4vw;
}
.online {
    width: 2vw;
    position: absolute;
    right: 0;
    top: 0;
}

<body>
    <div class="img-header">
        <img class="img" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png">
        <img class="online" src="http://www.clker.com/cliparts/e/E/F/G/p/g/alex-green-circle-md.png">
    </div>
    <p>Username</p>
</body>

这是更新 JSfiddle。

在线-带视口的头像图像

Online - avatar Image with viewport

html

css

viewport