适合的背景图象到第二背景图象里

Question

我有两个图像 - 一个框架和一个应该完全适合该框架的图像。使其变得非常困难的是响应性。

两张图片：

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

我尝试了什么：

.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：

https://jsfiddle.net/3z68kcbr/

Answer 1

你能不能只使用background-size上的padding-bottom和.brawler.shelly？

background-size: 77%和padding-bottom: 106%似乎对我有用：

.brawler.shelly {
  background-image: url("http://i.imgur.com/vuv5sdZ.png");
  background-position: center center;
  background-size: 77%;
  padding-bottom: 106%;
  background-repeat: no-repeat;
}

.portrait {
  background-image: url("http://i.imgur.com/i2IoHtw.png");
  background-position: center top;
  background-size: 100%;
  padding-bottom: 80%;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="col-4 col-md-3 col-lg-2 mb-2">
    <div class="portrait">
      <div class="brawler shelly">
      </div>
    </div>
  </div>
</div>

这也没有响应性问题。如果您想测试它的调整大小，我已经创建了一个 over here 的小提琴。

希望这有帮助！ ：）

Answer 2

您可以尝试使用background-position

CSS

.brawler.shelly {
  background-image: url(http://i.imgur.com/vuv5sdZ.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 86%;
    padding-bottom: 104%;
    position: sticky;
    vertical-align: bottom;
}

.portrait {
  background-image: url("http://i.imgur.com/i2IoHtw.png");
  background-position: center top;
  background-size: 100%;
  padding-bottom: 80%;
  background-repeat: no-repeat;
}

HTML

<div class="container">
      <div class="col-4 col-md-3 col-lg-2 mb-2">
         <div class="portrait">
            <div class="brawler shelly">
            </div>
         </div>
      </div>
</div>

Demo