中心封面图片与背景匹配

Question

我有一张尺寸为背景的背景图片：封面，我也把这张图片的一部分剪了一部分，使之更轻，并位于其他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>

SASS：

.main
    background-color: black
    background-image: url('../../assets/img/bg.png') 
    background-size: cover
    background-repeat: no-repeat
    overflow: hidden
.cover-image 
    position: absolute
    z-index: 30
    width: 31vw
    height: auto
    left: 4.5vw
    top: 15vh
    bottom: 0
    right: 0
    margin: auto

Answer 1

由于缺少演示链接或在线版本以查看发生了什么，我无法解决问题。

但是我认为这对您有用：

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

它使用transform来根据其<img>的宽度和高度（而不是父项的宽度和高度）来更改其位置。