適合背景圖像到第二個背景圖像

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

你能不只是玩弄於.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>

這也有響應任何問題。如果您想測試其大小如何調整，我已經創建了一個這樣的小提琴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