Wie man ein reaktives CSS-positioniertes Bild in CSS3 erstellt

Question

Ich möchte ein antwortfähiges Bild zu meiner Kopfzeile hinzufügen. Es sieht auf meinem Bildschirm perfekt aus, aber wenn ich die Bildschirmgröße ändere, ist es nicht in der richtigen Position.

HTML:

<section id="cover"> 
     <div class="container"> 
      <div class="row text-center"> 
      <div class="col-sm-12 character"> 
      </div> 
      </div> 
     </div> 
</section> 

CSS:

#cover { 
    background: url('../img/coverBg.png') no-repeat center center; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-border-bottom-right-radius: 400px 100px; 
    -webkit-border-bottom-left-radius: 400px 100px; 
    margin-bottom: 70px; 
    position: relative; 
} 

.character { 
    background: url("../img/character.png") no-repeat center center; 
    width: 170px; 
    height: 245px; 
    top: 67px; 
} 

how should look

but how look on other screen sizes

Answer 1

.img-responsive{ 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
\t margin:0 auto; 
 
    margin-top:50px; 
 
} 
 

 
.character{ 
 
    background:#ccc; 
 
    padding:30px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script> 
 

 
<!-- Example 1 ---> 
 

 
<section id="cover"> 
 
     <div class="container"> 
 
      <div class="row text-center"> 
 
      <div class="col-sm-12 character"> 
 
      
 
      <img class="img-responsive" src="https://i.stack.imgur.com/Fv1QA.png" /> 
 
      
 
      </div> 
 
      </div> 
 
     </div> 
 
</section> 
 

 
<!-- Example 2 ---> 
 

 
<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <div class="text-xs-center text-lg-center"> 
 
      
 
      <img class="img-responsive img-thumbnail" src="https://i.stack.imgur.com/Fv1QA.png" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

Sie legen eine feste UND-Höhe fest. Höhe einstellen: Automatisch; und dann solltest du das richtige Verhältnis sehen. Außerdem hat Ihr CSS für .character die Breite (170), die schmaler als die Höhe (245) ist, was eine Hochformatansicht wäre, aber Ihr Beispiel zeigt eine Querformatansicht.