如何在底部图像的尺寸内将图像定位在另一个图像的顶部？

时间：2014-10-04 04:23:55

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

我正在尝试为项目组合创建图库样式布局。这一切都是用Bootstrap 3完成的。

在桌面屏幕大小（Bootstrap术语中的md和lg）中，我使用了4列。平板电脑屏幕尺寸（sm）我使用两列和移动屏幕尺寸我使用1列。

图库中的每个项目都有一个标题，一个简短的摘录和一个图像缩略图。对于每个项目，我将所有这些东西放在小部件区域内。

主要问题在于缩略图。设计者有想法将每个项目的缩略图放在iMac监视器图像中。为了使它更加复杂，iMac显示器的黑色边框突出了小部件区域。

因为图片不仅仅是单词，而是一个小例子：

what i want to achieve

我无法在iMac图像中定位实际缩略图，因此即使我调整屏幕大小并达到Bootstrap网格的断点，它也会保留在iMac图像的灰色区域内。

我对我到目前为止所做的事情做了一个孤立的小提琴：http://jsfiddle.net/9ek3eqmv/

图库中每个项目元素的html如下所示：

<div class="col-sm-6 col-md-3 project-widget-container">

        <div class="project-widget-wrap" style="border: 1px solid green">

            <div class="project-widget">

                <div class="project-title">
                    <h4>Project 2</h4>
                </div>

                <div class="project-excerpt">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>

                <!--<div class="project-thumbnail-placeholder"></div>-->

            </div>

            <div class="project-image-container">
                <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
                <img class="featured-image img-responsive" src="http://s29.postimg.org/ryb2fc5tz/test_2.jpg">
            </div>

        </div>

    </div>

我创建了一个.project-widget-wrap类来获取imac伸出效果。这只是iMac图像黑色边框填充的包装：

.project-widget-wrap {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 10px;
        position: relative;
    }

在该元素中，我有.project-widget类div来获取白色小部件背景并包含其他元素。

我为.project-widget提供了底部填充，以便为iMac图像创建空间，并为iMac创建另一个图像：

.project-widget {
        background-color: white;
        padding-top: 30px;
        padding-bottom: 177px;
        border: 1px solid #eee;
        box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
    }

使用媒体查询我根据需要更改了填充。

我还定位了包装器.project-widget-wrap relative，所以我可以使用position：absolute在project-image-container div上将图像容器定位在小部件的底部：

.project-widget-wrap {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 10px;
        position: relative;
    }

.project-image-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 177px;
    }

.project-image-container img {
        position: absolute;
        bottom: 0;
    }

任何想法我如何设计这样，以便特色图像保留在iMac屏幕图像内，并将其缩放到不同的屏幕尺寸？

4 个答案:

答案 0 :(得分：1)

我改变了很多CSS。你确实需要一个.container绕一行或填充将关闭。要做的是找到比率。我不知道图像是正方形还是什么，但这就是你所拥有的。否则，我建议你只做复合材料。或者只是在它周围使用简单的线条（用边框和形状绘制“显示器”），它看起来会更好，体积更小。

DEMO：http://jsbin.com/lodej/1/

http://jsbin.com/lodej/1/edit

具有背景的另一个版本：http://jsbin.com/lodej/2

<强> HTML ：

  <div class="container">
     <div class="row">


    <div class="col-sm-6 col-md-3 project-widget-container">
       <section>
          <div class="project-title">
             <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
             Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
             <div class="thumb"><img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png"></div>
             <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png"> 
          </div>
       </section>
    </div>
    <!-- col -->


    <div class="col-sm-6 col-md-3 project-widget-container">
       <section>
          <div class="project-title">
             <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
             Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
             <div class="thumb"><img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png"></div>
             <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png"> 
          </div>
       </section>
    </div>
    <!-- col -->   

   <div class="clearfix visible-sm"></div>

    <div class="col-sm-6 col-md-3 project-widget-container">
       <section>
          <div class="project-title">
             <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
             Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
             <div class="thumb"><img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png"></div>
             <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png"> 
          </div>
       </section>
    </div>
    <!-- col -->           

    <div class="col-sm-6 col-md-3 project-widget-container">
       <section>
          <div class="project-title">
             <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
             Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
             <div class="thumb"><img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png"></div>
             <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png"> 
          </div>
       </section>
    </div>
    <!-- col -->           

   <div class="clearfix visible-sm"></div>

 </div>
 <!-- row -->

  

<强> CSS 

.project-widget-container {
    position: relative;
    margin-bottom: 30px;
}
.project-widget-container section {
    position: relative;
    padding-top: 20px;
    margin-left: 10px;
}
.project-widget-container section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    bottom: 0;
    border: 1px solid #eee;
    z-index: -1;
}
.project-widget-container section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    bottom: 0;
    box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
    z-index: -1;
}
.project-title {
    border-left: 2px solid #660061;
    padding-left: 20px;
}
.project-title h4 {
    color: #660061;
    font-weight: bold;
    font-size: 1.4em;
    line-height: 50px;
}
.project-excerpt {
    color: #666;
    font-size: 1.1em;
    padding: 20px 20px 0 20px;
    line-height: 1.2em;
    height: 60px;
}
img.imac {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}
.project-image-container {
    position: relative;
    left: -10px;
    padding-top: 85%;
}
.thumb img {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -25%;
}
.thumb {
    position: absolute;
    z-index: 1;
    bottom: 18%;
    left: 0;
    right: 0;
}

答案 1 :(得分：1)

您可以创建仅限CSS的iMac，然后将图像放入其中......

像这样：http://jsfiddle.net/9ek3eqmv/10/ 

.project-widget {
    width:30%;   
    margin:auto;
}
.imac {
    display:block;
    position:relative;
    padding-bottom:9%;
    margin-bottom:16%;
    border-radius:5px;
    background: #a0a0a0;/* Old browsers */
    background: -moz-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #a0a0a0), color-    stop(100%, #e0e1e3));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);/* Opera 11.10+ */
    background: -ms-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);/* IE10+ */
    background: linear-gradient(to right, #a0a0a0 0%, #e0e1e3 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a0a0', endColorstr='#e0e1e3', GradientType=1);/* IE6-9 */
}
.imac .bezel {
    display:block;
    position:relative;
    background-color:black;
    border-radius:5px 5px 0px 0px;
    padding:4.25%;
    overflow:hidden;
}
.imac .bezel:after {
    content:"";
    display:block;
    position:absolute;
    background-color:rgba(255, 255, 255, 0.2);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,252,252,0) 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,252,252,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#00fffcfc',GradientType=0 ); /* IE6-9 */
    top:0%;
    bottom:-20%;
    right:0;
    left:60%;
    -webkit-transform: rotate(-25deg);
    -webkit-transform-origin: 0% 0% -o-transform: rotate(-25deg);
    -o-transform-origin: 0% 0% transform: rotate(-25deg);
    transform-origin: 0% 0%;
}
.imac .screen {
    display:block;
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
    background:#444 no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.imac .screen:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* imac has aspect ratio of 16:9*/
}
.imac .stand {
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    bottom:-22%;
    width:20%;
    margin:auto;
    background:#ddd;
    background: rgb(141, 142, 146); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(141, 142, 146, 1) 3%, rgba(226, 227, 230, 1) 38%, rgba(244, 244, 244, 1) 51%, rgba(128, 129, 132, 1) 64%, rgba(193, 193, 193, 1) 77%, rgba(224, 224, 224, 1) 95%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, rgba(141, 142, 146, 1)), color-stop(38%, rgba(226, 227, 230, 1)), color-stop(51%, rgba(244, 244, 244, 1)), color-stop(64%, rgba(128, 129, 132, 1)), color-stop(77%, rgba(193, 193, 193, 1)), color-stop(95%, rgba(224, 224, 224, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(141, 142, 146, 1) 3%, rgba(226, 227, 230, 1) 38%, rgba(244, 244, 244, 1) 51%, rgba(128, 129, 132, 1) 64%, rgba(193, 193, 193, 1) 77%, rgba(224, 224, 224, 1) 95%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(141, 142, 146, 1) 3%, rgba(226, 227, 230, 1) 38%, rgba(244, 244, 244, 1) 51%, rgba(128, 129, 132, 1) 64%, rgba(193, 193, 193, 1) 77%, rgba(224, 224, 224, 1) 95%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(141, 142, 146, 1) 3%, rgba(226, 227, 230, 1) 38%, rgba(244, 244, 244, 1) 51%, rgba(128, 129, 132, 1) 64%, rgba(193, 193, 193, 1) 77%, rgba(224, 224, 224, 1) 95%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(141, 142, 146, 1) 3%, rgba(226, 227, 230, 1) 38%, rgba(244, 244, 244, 1) 51%, rgba(128, 129, 132, 1) 64%, rgba(193, 193, 193, 1) 77%, rgba(224, 224, 224, 1) 95%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8d8e92', endColorstr='#e0e0e0', GradientType=0); /* IE6-9 */
}
.imac .stand:before, .imac .stand:after {
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    width:2px;
    height:2px;
    border:10px solid grey;
    border-color:transparent #e0e0e0;
}
.imac .stand:before {
    right:100%;
    border-width:9px 12px 0px 0px;
}
.imac .stand:after {
    left:100%;
    border-width:9px 0px 0px 12px;
}
<div class="project-widget">    

<div class="imac">
    <div class="bezel">
        <div class="screen" style="background-image:url(http://lorempixel.com/400/250/abstract)" >
        </div>
    </div>
    <div class="stand"></div>
</div>
  
</div>

答案 2 :(得分：0)

尝试http://jsfiddle.net/webspilka/oa74zbb6/

也许它需要一个java脚本来设置.project-image-container.height = .imac.height的高度。 和

img.featured-image {
    max-height: 150px;
    position:absolute;
    top: 0;
 }

$('.project-image-container').outerHeight('setHeightChild.imac')

答案 3 :(得分：0)

如果您只是将“imac”图像设为背景图像，这样可以让您的工作更轻松，这样您就可以随时使用@media（无论您的调整是什么）CSS在任何大小的屏幕上获得效果。这也将帮助您消除所有填充问题。这是一些让你入门的标记。希望这对你有所帮助！

<!--Your HTML Mark-Up-->


<div class="project-widget">

  <div class="project-title">
    <h4>Project 2</h4>
  </div>

  <div class="project-excerpt">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <!--<div class="project-thumbnail-placeholder"></div>-->

</div>

<div id="project-image-container">
  <!--I removed the "iMac" and replaced it in your background"-->
  <img class="featured-image" src="http://s29.postimg.org/ryb2fc5tz/test_2.jpg">
</div>

</div>

</div>


/* Your CCS */

#project-image-container {
min-width: 255px;
min-height: 177px;
background-image: url("http://s29.postimg.org/b5kegwt53/small_mac.png");
/*Just Place Mac Images as background*/
background-repeat: no-repeat;
}
.featured-image {
width: 242px;
height: 134px;
padding: 6px;
}

/* You can now adjust this for all your media sized with @media(....)*/

Fiddle

相关问题
最新问题