【发布时间】：2014-10-04 04:23:55
【问题描述】：
我正在尝试为项目组合创建画廊风格的布局。这一切都通过 Bootstrap 3 完成。
在桌面屏幕尺寸（Bootstrap 术语中的 md 和 lg）上，我使用 4 列。在平板电脑屏幕尺寸 (sm) 上，我使用两列，而在移动屏幕尺寸上，我使用 1 列。
画廊中的每个项目都有一个标题、一个简短的摘录和一个图像缩略图。对于每个项目，我将所有这些东西都放在一个小部件区域内。
主要问题在于缩略图。设计师的想法是将每个项目的缩略图放置在 iMac 显示器图像中。为了让这更复杂一点，iMac 显示器的黑色边框伸出了小部件区域。
因为一张图片说明的不仅仅是文字，这里有一个小例子：
我在 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 相对定位，因此我可以将图像容器定位在小部件的底部，在 project-image-container div 上使用 position: absolute：
.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 屏幕图像内并使其缩放到不同的屏幕尺寸？
【问题讨论】：
标签： css twitter-bootstrap responsive-design twitter-bootstrap-3