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而不是padding包裹图片和绿色图标图片，为绿色图标添加right和top值。

现在当它的大小都在同一个地方时，代码如下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这已更新JSfiddle。

在线 - 具有视口的头像图像

1 个答案: