如何在 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

您正在设置固定的宽度和高度。设置高度：自动；然后你应该看到正确的比例。此外，您的 .character 的 CSS 的宽度（170）比高度（245）窄，这将是纵向视图，但您的示例显示横向视图。

Answer 2

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  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>