我尝试实现类似this。
问题是这是响应所以个人图像如iphone，logo，耳机堆栈在较小的屏幕下方。
我希望在容器中固定位置。我不希望图像堆叠在一起。 如何使用bootstrap定位这样的图像？ 我希望网站能够快速响应，但图像的位置仍然准确。
帮助将不胜感激。
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：
/********************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%;
}