css - 如何在底部图像的尺寸范围内将图像放置在另一个图像的顶部？

Question

我正在尝试为元素组合创建画廊风格的布局。这一切都是通过 Bootstrap 3 完成的。

在桌面屏幕尺寸(Bootstrap 术语中的 md 和 lg)上，我使用 4 列。在平板电脑屏幕尺寸 (sm) 上，我使用两列，在移动屏幕尺寸上，我使用 1 列。

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

主要问题是缩略图。设计师想到了将每个元素的缩略图放在 iMac 显示器图像中。更复杂的是，iMac 显示器的黑色边框突出了小部件区域。

因为图片所表达的不仅仅是文字，所以这里有一个小例子:

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

到目前为止，我已经尝试了一个孤立的 fiddle :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 相对位置，这样我就可以将图像容器定位在小部件的底部，使用 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 屏幕图像内部并使其缩放到不同的屏幕尺寸吗？

Answer 1

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

演示: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;
}