Geschachtelte div floating außerhalb von div nach dem Hinzufügen von Text mit jQuery

Question

Ich habe ein Problem, dass ich einmal jQuery's .html() verwenden, um einen Absatz in ein geschachteltes div einzufügen. Es bewirkt, dass es außerhalb von div schwebt. Ich habe versucht, mit den Rändern und dem Auffüllen beider Divs zu spielen, aber ohne Erfolg. Ich bin neu in javascript/jQuery und würde wirklich gerne verstehen, warum das passiert. Danke für die Hilfe im Voraus.

Hier ist ein Screenshot Link:

Hier ist mein html:

<div class="selectHero"> 
    <div id="ironMan"></div> 
    <div id="capAmerica"></div> 
    <div id="thor"></div> 
    <div id="winterSoldier"></div> 
</div> 

Hier ist mein javascript:

$('#ironMan').html("<p>IronMan</p>"+"<p> health: "+ironMan.health+"</p>"); 

Hier ist meine CSS:

.selectHero { 
    max-height: 250px; 
    max-width: 900px; 
} 

#ironMan { 
    background-image: url("../images/ironMan.jpg"); 
    background-size: cover; 
    height: 200px; 
    width: 200px; 
    display: inline-block; 
    text-align: center; 
    color: white; 
    font-size: 26px; 
} 

Answer 1

Versuchen Sie mit background-size Eigenschaft. Ich denke, ähnliche Frage wird hier geschrieben -

Fit background image to div