缩放时框会调整大小

Question

我在制作盒子时遇到了一些麻烦。 当我放大或缩小时，我不知道如何防止盒子调整大小。 这真让我很烦，因为这会使我的头像不适合。

照片：

代码：

<div class="header-profile">
    <div class="container">
        <div class="profile-picture-position">
            <img src="/blog/uploads/',$_SESSION['avatar'],'" class="img-thumbnail" alt="Cinque Terre" width="160" height="160"/>
        </div>
    </div>
</div>


.header-profile
{
    display: block;
    position: absolute;
    height: 22%;
    width: 100%;
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
    background-color: #1DA1F2 !important
}

容器是bootstrap

Answer 1

实际上，你的盒子保持相同的尺寸。它是调整大小的标题div，因为即使放大或缩小它也会覆盖高度的％22。你可以

1）相对制作盒子大小。

2）使标题div大小为绝对值

在页面放大或缩小时确定其比例。