如何在CSS3中創建響應式CSS定位圖像

我想將響應式圖像添加到我的標題中。它在我的屏幕上看起來很完美，但是當我改變屏幕尺寸時，它已經不在位。如何在CSS3中創建響應式CSS定位圖像

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

來源

2017-09-26 Nurçin Özer

-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>

來源

2017-09-26 17:31:10

''使用它 –

我試過了，但它仍然無法正常工作..當我改變屏幕尺寸時，字符/吉祥物從標題開始如下所示：https：//i.imgur.com/pFmpy8K.png –

@NurçinÖzer你能否以全碼代碼更新你的問題 –

您正在設置固定寬度和高度。設置高度：自動;然後你應該看到正確的比例。此外，你的.character的CSS的寬度（170）比高度（245）窄，這將是一個縱向視圖，但你的例子顯示了一個橫向視圖。

來源

2017-09-26 17:36:19

如何在CSS3中創建響應式CSS定位圖像

回答

相關問題