Javascript 使用背景图像和顶部图像工作不正常

我试图创建一个个人资料页面，我的网站的用户将有一个作为横幅的图像，然后它的个人资料照片

我已经能够做到这一点：

当我尝试在图像上使用

上边距

时，它会移动图像，但也会扩展图像的背景，我不希望这样。我希望得到这个：

我注意到在我的代码中，图像似乎是重复的，而不是仅仅适合/裁剪

代码如下：

class Profiles extends React.Component{

    render(){
        return(
            <div className="profile-container">
                <div className="profile-header" 
                    style={{ backgroundImage: `url(${UserProfile.User1.values.profileHeaderImag})`}}>
                        <img 
                        src={UserProfile.User1.values.profileImg} 
                        alt="profileImg"
                        className="profile-header-image-user"/>                    
                </div>
                <div className="profile-content">
                    <p> more</p>
                </div>
            </div>
        )
    }   
}

我的目标是能够显示横幅和个人资料图片，如第二张图片所示，并在屏幕大小改变时保持此渲染

有什么想法，我可以移动个人资料图片与影响大小的横幅之一

---

谢谢

您可以将横幅的位置设置为

位置：绝对然后您可以将外形位置设置为
位置：相对然后在配置文件内，您可以通过设置不同的顶部值（即
顶部：5px
和左侧值（即
左侧：20px
其他值为底部和右侧）来移动图片。
尝试使用绝对定位：

.profile-header { position: relative }
.profile-header > img { top: 200px; left: '200px; }

使用位置属性

.profile-header {
    position: relative;
    width: 70% ;
    height: 5% ;
    max-height: 25rem;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    border-radius: 20px;
}

.profile-header-image-user {
    position: absolute;
    border-radius: 150px;
    width: 130px;
    height: 130px;
    left: 5%;
    top: 15%;
}

很抱歉，我没有测试，但我认为这是一个很好的方法。
您需要将父元素
位置：相对的
和子元素（配置文件pic）设置为
位置：绝对的
。然后您可以设置
顶部
左侧
右侧
或
底部
。我使用了translate，不过您也可以使用
bottom:-50px；框大小：边框框
，但这里认为转换是更好的选择


.banner{
位置：相对位置；
高度：200px；
宽度：100%；
背景：url（“https://i.imgur.com/T8YRjiQ.jpeg");
背景大小：100%100%；
边缘底部：55px；
边界半径：10px；
盒影：5px 5px 10px#222；
边框：5px纯银；
框大小：边框框；
}
.个人资料{
位置：绝对位置；
高度：156px；
宽度：156px；
边框：5px纯银；
边界半径：50%；
底部：0；
左：50px；
转化：translateY（50%）；
盒影：继承；
}

这是我的看法：谢谢，它的工作原理和我被驱逐时一样。唯一的想法是背景图像A没有保持比例。调整屏幕大小时，图像比率会被修改。我可以保持一个适当的配给，以看起来很好，即使我失去了一些图像的一部分，如可能会做一个作物@JBUTLER483如果是这种情况，您可以使用背景大小属性，但可能需要添加一个禁止重复。谢谢，它的工作原理与我被删除时的工作原理相同。唯一的想法是背景图像A没有保持比例。调整屏幕大小时，图像比率会被修改。我可以保持一个适当的配给，以看起来很好，即使我失去了像may do crop@escteban这样的部分图像
.profile-header {
    position: relative;
    width: 70% ;
    height: 5% ;
    max-height: 25rem;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    border-radius: 20px;
}

.profile-header-image-user {
    position: absolute;
    border-radius: 150px;
    width: 130px;
    height: 130px;
    left: 5%;
    top: 15%;
}