Css 在线-带视口的头像图像_Css_Html_Viewport

Css 在线-带视口的头像图像

css html

Css 在线-带视口的头像图像,css,html,viewport,Css,Html,Viewport,我在这个项目中使用viewport是为了响应我想在右上角有一个头像来显示用户头像，还有一个绿色圆圈来显示他在线问题是，如果我增大或减小圆圈移动的大小，我无法使圆圈响应。两张图片：大小型 HTML: <body> <img class="img-header" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-bus

我在这个项目中使用viewport是为了响应

我想在右上角有一个头像来显示用户头像，还有一个绿色圆圈来显示他在线

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

大

小型

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>

用

div

包裹图像和绿色图标图像，然后为绿色图标添加

右

和

顶

值，而不是

填充

现在，无论大小，它都将位于同一位置，代码如下：

.img头{
位置：相对位置；
利润上限：0vw；
保证金权利：4vw；
浮动：对；
}
.img{
宽度：7vw；
高度：7vw；
边界半径：50%；
对象匹配：覆盖；
垂直对齐：超级；
}
p{
浮动：对；
文本转换：粗体；
利润率最高：1vw；
保证金权利：2vw；
显示：内联；
字体大小：4vw；
}
.在线{
宽度：2vw；
位置：绝对位置；
右：0；
排名：0；
}


用户名

太棒了，我怎么会忘了呢。非常感谢。还有一件事，如果你缩小显示器的尺寸，图像似乎会下降：非常欢迎：）如果这解决了你的问题，你可以接受我的答案为正确答案。在我接受答案之前，你能检查我的最后评论吗？通过添加

垂直对齐：super

到

.img

那就太好了。谢谢，我已经接受了你的回答。

.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;
}