Html 将封面图像居中以与背景匹配

我有一个背景图片的大小：封面，我也有这张图片的一部分剪掉，使之更轻，并放置在其他div顶部

结构如下 （灰色-背景，紫色-背景的一部分被剪掉并放在顶部，粉色-菜单部分（！）被该图像覆盖，以便我可以与之互动） 问题是，我希望封面图像在调整浏览器窗口大小时始终与其背景相匹配

我手动设置了“顶部”和“左侧”以匹配背景，但当高度/宽度比发生变化时，它仍然不匹配

    <section class="main">
    <div class="container">
        <div class="content">
            Main page content
        </div>
    <side-container></side-container>
    </div>
    <img class="cover-image" src="../../assets/img/img-shoes@2x.png" alt="sneakers">
</section>

---

由于缺少演示链接或在线版本来查看正在发生的事情，我无法找出问题所在

但我认为这会对你有用：

.cover-image 
    position: absolute
    z-index: 30
    width: 31vw
    height: auto
    top: 50%
    left: 50%
    transform: translate( -50%, -50% )
    margin: auto

---

它使用

transform

根据其宽度和高度（而不是父级）更改该

的位置。

没有任何演示链接吗？

.cover-image 
    position: absolute
    z-index: 30
    width: 31vw
    height: auto
    top: 50%
    left: 50%
    transform: translate( -50%, -50% )
    margin: auto