如何保持图像固定但也有响应，因此它们不会重叠

【问题标题】：How to keep images fixed but also responsive so they don't overlap如何保持图像固定但也有响应，因此它们不会重叠
【发布时间】：2015-12-24 17:30:51
【问题描述】：

我想达到像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：

/********************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%;
}

【问题讨论】：

  • 您的意见是什么？你试过什么吗？
  • 为什么不把它做成一张背景图呢？

标签： html css twitter-bootstrap


【解决方案1】：

通过添加 .img-responsive 类，可以使 Bootstrap 3 中的图像响应友好。这会将max-width: 100%;、height: auto; 和display: block; 应用于图像，以便它很好地缩放到父元素。

要居中使用.img-responsive 类的图像，请使用.center-block 而不是.text-center。

可以找到替代解决方案here

Demo 的替代解决方案 (jFiddle)

【讨论】：

  • 在你的例子中，如果我想要一个谷歌图像在左侧，另一个在同一行同时在右侧，这样它在每个设备中都可以响应。那我该怎么办？正如您在给定的 iphone 和耳机图像示例中看到的那样。
  • 这是我想问的问题。所以没有必要创建单独的问题。请编辑答案中的代码。
  • 这里有新问题stackoverflow.com/questions/32807754/…
  • @AbhishekGupta 发布答案
猜你喜欢
  • 2012-02-24
  • 2021-02-01
  • 1970-01-01
  • 2020-03-02
  • 2016-01-09
  • 1970-01-01
  • 1970-01-01
  • 2015-12-13
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode