CSS3でレスポンシブCSSポジショニング画像を作成する方法

Question

レスポンシブ画像をヘッダに追加したい。それは私の画面上で完璧に見えますが、私は画面のサイズを変更すると、それは定位置外です。

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

固定幅と高さを設定しています。高さの設定：自動;正しい比率が表示されます。また、.character用のCSSの幅（170）は、ポートレート表示になる高さ（245）よりも狭いですが、あなたの例では横長ビューが表示されています。