Anpassung der Schriftgröße macht meine Container Hintergrundbild Skala

Question

Ich habe eine <section> mit einem Hintergrundbild und eine <h1> innerhalb davon, und immer wenn ich die font-size der <h1> anpassen, skaliert das Bild zu einem bestimmten Zeitpunkt.

Ich habe Block-Level-Zuweisung der <h1> abgenommen, ich habe absolute Positionierung eingestellt, nahm die line-height, und eine Reihe anderer Dinge. Es gab einen Punkt, an dem die Schriftart in der Lage war, ohne die Hintergrundgröße der <section> zu erhöhen, aber jetzt kann ich nicht scheinen, die font-size einzustellen, ohne das Hintergrundbild zu beeinflussen.

Der Code:

.mis_banner h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 140%; 
 
    font-weight: bold; 
 
    font-size: 60px; 
 
    display: inline-block; 
 
    width: 49%; 
 
} 
 
.mis_banner { 
 
    background: url(../images/HeroDT.jpg) center bottom no-repeat; 
 
    background-size: cover; 
 
    padding-top: 94px; 
 
}

<section class="mis_banner"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h1 class="uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-bottom" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: false}">READY, <br> SET, <br> COOK! 
 
     </h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Dies ist ein natürliches Ergebnis der background-size-scale Einstellung. Wenn Sie die Textgröße vergrößern, muss der Container auch größer werden, damit er in den Text passt, und der Hintergrund muss größer werden, um den Container zu bedecken. Wenn Sie nicht möchten, dass der Hintergrund skaliert wird, können Sie entweder background-size entfernen oder eine bestimmte Nummer wie 50px auto eingeben.