背景画像を第2の背景画像に合わせる

Question

私は2つの画像、つまりフレームとそのフレームに正確に収まる画像を持っています。本当に難しいのはです。です。

2枚の画像：

それは（もリサイズ後）のようになるはずです何

：

私が試したもの：

.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

あなただけ.brawler.shellyにbackground-sizeとpadding-bottomで遊んでいないことはできますか？

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>

これはまた、応答性とは問題がありません。サイズ変更の方法をテストしたい場合は、このというフィーバーを作成しました。

希望すると便利です。 :)

あなたはこれを試すことができ

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

さらに役立ちますが、一緒にプレイする時間がない