html - 修复图像在页面左侧、中心和右侧的位置，但也具有响应性

标签 html css twitter-bootstrap

如果我想在同一行中同时在左侧显示一张图像，在右侧显示另一张图像，以便它在每个设备上都能响应。那我该怎么办？正如您在给定的 iphone 和耳机图像示例中所见。

我正在努力实现 this .

问题是这是响应式的，因此像 iphone、 Logo 、耳机这样的单独图像会在较小的屏幕中堆叠在彼此下方。

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

<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>
<div class="wrapper col-md-6">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

CSS

.wrapper { float: left; clear: left; display: table; table-layout: fixed; }
img.img-responsive { display: table-cell; max-width: 100%; }

.col-md-6 { width: 25%; float: left;}
.col-md-3 { width: 25%; float: right;}

JSFiddle

关于html - 修复图像在页面左侧、中心和右侧的位置，但也具有响应性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32807754/

上一篇：javascript - 让用户调整 div 容器的大小，页面刷新后保存

下一篇：html - 为什么表单标签在 div 之后不起作用

相关文章：

javascript - Angular HTML 选择选项禁用和启用

html - 严格的文档类型 - 表单和输入元素

javascript - 悬停时更改图像 src

javascript - AMD Loader 禁用，在主题中启用

javascript - 使用 Bootstrap 和 AngularJS 的单页应用程序

javascript - 如何将下拉列表转换为在 HTML 和 PHP 中显示搜索匹配结果的输入标记？

css - 使用 CSS 定位 DIV 的第一个元素

css - 在 CSS3 中，flex-grow 为 0.1 的 flex 元素应该占用所有额外空间还是只占用 10%？

javascript - 在 slider 中播放多个音频文件

jquery - jqGrid + twitter Bootstrap (2.1.0) : navbar changes style

©2024 IT工具网  联系我们