Html 将背景图像适配到第二个背景图像中

我有两张图片，一张是相框，另一张应该正好适合这个相框。真正让它变得困难的是响应能力

两张图片：

.brawler.shelly {
    background-image: url("/images/heroes/high/hero_icon_shelly.png");
    background-position: center center;
    background-size: 85%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.portrait {
    background-image: url("/images/icons/card_common.png");
    background-position: center top;
    background-size: 100%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

它应该是什么样子（也是在调整大小之后）：

我所尝试的：

.brawler.shelly {
    background-image: url("/images/heroes/high/hero_icon_shelly.png");
    background-position: center center;
    background-size: 85%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.portrait {
    background-image: url("/images/icons/card_common.png");
    background-position: center top;
    background-size: 100%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

JSfiddle:

.brawler.shelly {
    background-image: url("/images/heroes/high/hero_icon_shelly.png");
    background-position: center center;
    background-size: 85%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.portrait {
    background-image: url("/images/icons/card_common.png");
    background-position: center top;
    background-size: 100%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

---

你能不能在

.brawler.shelly

上玩

背景尺寸和
填充底部的游戏

背景尺寸：77%
和
填充底部：106%
对我来说似乎效果不错：


.brawler.shelly{
背景图像：url（“http://i.imgur.com/vuv5sdZ.png");
背景位置：中心；
背景大小：77%；
垫底：106%；
背景重复：无重复；
}
.肖像{
背景图像：url（“http://i.imgur.com/i2IoHtw.png");
背景位置：中上；
背景大小：100%；
垫底：80%；
背景重复：无重复；
}
你可以试试这个，
背景位置

CSS

HTML



没有时间进一步帮助，但要使用相对和绝对框，并使用背景大小的封面。这不起作用，因为静态高度-响应性很重要！