如何保持圖像固定，但也響應，所以他們不重疊

Question

我試圖實現像this。

問題是，這是反應如此個人圖像像iPhone，標誌，耳機堆疊在較小的屏幕下彼此。

我想那裏的位置固定在容器中。我不希望圖像堆疊在彼此之下。 如何使用引導來定位像這樣的圖像？ 我希望網站能夠做出反應，但圖像的位置也保持準確。

幫助將不勝感激。

HTML：

<div class="jumbotron" style="background-image: url('background.png'); width: 100%; height: 100%;position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover; 
background-repeat: no-repeat;"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-4"> 

       <div id="iphone" class="col-xs-4"> 
       </div> 
       <div id="camera" class="col-xs-4"> 
       </div> 
      </div> 
      <div class="col-md-4"> 

       nothing 
       </div> 

      <div class="col-md-4"> 

       <div id="headphones" class="col-xs-4"> 
       </div> 
      </div> 
    </div> 

    <div class="row"> 
<div class="col-md-4"> 

       <div id="notebook" class="col-xs-4"> 
       </div> 
       <div id="glasses" class="col-xs-4"> 
       </div> 
      </div> 
      <div class="col-md-4"> 

       <div id="logo" class="col-xs-4"> 
       </div> 
       </div> 

      <div class="col-md-4"> 

       <div id="gopro" class="col-xs-4"> 
       </div> 
       <div id="controller" class="col-xs-4"> 
       </div> 
      </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div id="cookie" class="col-xs-4"> 
       </div> 
       <div id="tea" class="col-xs-4"> 
       </div> 
     </div> 
     <div class="col-md-6"> 
      <div id="macbook" class="col-xs-4"> 
       </div> 
     </div> 
     <div class="col-md-3"> 
      <div id="pen" class="col-xs-4"> 
       </div> 
       <div id="harddisk" class="col-xs-4"> 
       </div> 
       <div id="iwatch" class="col-xs-4"> 
       </div> 
     </div> 
     </div> 
    </div> 
</div> 

CSS：自舉3

/********************iphone*******************************/ 
#iphone 
{ 
    position: relative; 
    top:-110px; 
    left:-140px; 
    background-image: url('../images/New Folder/iPhone.-3.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    float: left; 
    width: 200px; 
    height: 196px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #iphone { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #iphone {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #iphone { height: auto; 
    max-width:100%; } 
} 
/********************headphones***************************/ 
#headphones 
{ 
    position: relative; 
    float: right; 
    top:-30px; 
    right:-130px; 
    background-image: url('../images/New Folder/headphones-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 400px; 
    height: 450px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #headphones { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #headphones {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #headphones { height: auto; 
    max-width:100%; } 
} 
/******************camera***********************/ 
#camera 
{ 
    position: relative; 

    top:110px; 
    left:-300px; 
    background-image: url('../images/New Folder/camera-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 160px; 
    height: 182px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #camera { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #camera {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #camera { height: auto; 
    max-width:100%; } 
} 
/***********notebook*******************/ 
#notebook 
{ 
    position: relative; 

    top:-190px; 
    left:-130px; 
    background-image: url('../images/New Folder/moleskine-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 275px; 
    padding-top: 109.47%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #notebook { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #notebook {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #notebook { height: auto; 
    max-width:100%; } 
} 
/****************glasses******************/ 
#glasses 
{ 
    position: absolute; 

    top:-110px; 
    left:0px; 
    background-image: url('../images/New Folder/glasses-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 250px; 
    height: 156px; 
    padding-top: 192.36%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #glasses { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #glasses {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #glasses { height: auto; 
    max-width:100%; } 
} 
/**************logo************************/ 
#logo 
{ 
    position: relative; 

    top:-300px; 
    left:0px; 
    background-image: url('../images/New Folder/logo-transparent.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:200%; 
    display:block; 
    width: 3800px; 
    height: 1800px; 
    padding-top: 225.07%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #logo { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #logo {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #logo { height: auto; 
    max-width:100%; } 
} 
/******************gopro*****************/ 
#gopro 
{ 
    position: relative; 

    top:-100px; 
    left:0px; 
    background-image: url('../images/New Folder/GoPro-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 120px; 
    height: 121px; 
    float: right; 
    padding-top: 95.02%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #gopro { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #gopro {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #gopro { height: auto; 
    max-width:100%; } 
} 
/********************controller****************/ 
#controller 
{ 
    position: relative; 

    top:-100px; 
    left:240px; 
    background-image: url('../images/New Folder/console-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 50px; 
    height: 95px; 
    padding-top: 68.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: left; 
} 
@media only screen and (max-width: 767px) { 
    #controller { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #controller {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #controller { height: auto; 
    max-width:100%; } 
} 
/**************tea****************/ 
#tea 
{ 
    position: absolute; 

    top:-870px; 
    left:100px; 
    background-image: url('../images/New Folder/tea-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 180px; 
    height: 160px; 
    padding-top: 95.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: right; 
} 
@media only screen and (max-width: 767px) { 
    #tea { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #tea {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #tea { height: auto; 
    max-width:100%; } 
} 
/****************cookie****************/ 
#cookie 
{ 
    position: absolute; 

    top:-870px; 
    left:0px; 
    background-image: url('../images/New Folder/cookies-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 90px; 
    height: 82px; 
    padding-top: 95.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #cookie { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #cookie {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #cookie { height: auto; 
    max-width:100%; } 
} 
/****************macbook****************/ 
#macbook 
{ 
    position: relative; 

    top:-1000px; 
    left:0px; 
    background-image: url('../images/New Folder/MacBook-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 550px; 
    height: 447px; 
    padding-top: 123.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #macbook { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #macbook {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #macbook { height: auto; 
    max-width:100%; } 
} 
/**************************harddisk*****************/ 
#harddisk 
{ 
    position: absolute; 

    top:-1000px; 
    left:250px; 
    background-image: url('../images/New Folder/hard-disk-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 325px; 
    padding-top: 92.302%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: right; 
} 
@media only screen and (max-width: 767px) { 
    #harddisk { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #harddisk {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #harddisk { height: auto; 
    max-width:100%; } 
} 
/********************iwatch*****************************/ 
#iwatch 
{ 
    position: absolute; 

    top:-900px; 
    left:0px; 
    background-image: url('../images/New Folder/iWatch-4.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 213px; 
    padding-top: 127.79%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float:left; 
} 
@media only screen and (max-width: 767px) { 
    #iwatch { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #iwatch {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #iwatch { height: auto; 
    max-width:100%; } 
} 
/****************pen*******************/ 
#pen 
{ 
    position: absolute; 

    top:-870px; 
    left:-50px; 
    background-image: url('../images/New Folder/handle.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 150px; 
    height: 177px; 
    padding-top: 84.79%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #pen { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #pen {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #pen { height: auto; 
    max-width:100%; } 
} 
.row 
{ 

    height: 33%; 
} 

Answer 1

圖像可以通過做加法的.img-responsive類的響應友好。這適用於max-width: 100%;,height: auto;和display: block;圖像，以便它很好地縮放到父元素。

要將使用.img-responsive類的圖像居中，請使用.center-block而不是.text-center。

另一種解決方案，可以發現here