具有不同高度和宽度的响应图像网格
Responsive Image Grid with Different Heights and Widths
我需要能够创建一个具有不同图像宽度的响应图像网格，（链接到下面的图像。）
http://jessewintondesign.com/imagegrid.jpg
这是我现在拥有的。
http://magnumdigitalcinema.com/dev
这个^在我的27英寸iMac上很合适，看起来也很好，但反应不灵敏，由于高度和宽度的不同，我还没能找到一个好的解决方案。Masonry.js不适合我，因为我正在Wordpress中开发这个网站，网格是动态创建的。我需要知道是否还有其他选择。提前感谢大家！
这是一个潜在的有用资源：http://susy.oddbird.net/
此外，使用CSS也可以做到这一点。看看这个过去的问题：具有不相等图像大小的简单CSS网格
以下是查询的解决方案。
按照相同的比例制作所有图像并固定（最大宽度：100%；）若并没有将图像标记为相同的比例，那个么在媒体查询时就必须使用不同的代码（高度/宽度）。
我想明白了。只需使用具有百分比值而不是像素值的padding-bottom，并将图像添加为CSS背景图像。由于它在Wordpress中，背景图像通过特色图像加载在每个帖子上。
以下是基本的HTML&CSS。同样，HTML是动态的，因为它是Wordpress主题。
HTML
<section id="portfolio-items">
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/Tyskie1.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=g2WV-cM9CjA">
<div class="video-info">
<hgroup>
<h2 class="name">The Tyskie</h2><!-- / .name -->
<h5 class="type">Commercial | <span class="client">Challenge</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/Field4.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=wiG8Pf6Cnxo">
<div class="video-info">
<hgroup>
<h2 class="name">The Future</h2><!-- / .name -->
<h5 class="type">Commercial | <span class="client">KE Precision AG</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/Untitled-8.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=3xh5c20o8vM">
<div class="video-info">
<hgroup>
<h2 class="name">Psalm 23</h2><!-- / .name -->
<h5 class="type">Music Video | <span class="client">Corner Room</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/Screen-Shot-2015-07-17-at-12.48.48-PM.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=TKfE1jTBFVk">
<div class="video-info">
<hgroup>
<h2 class="name">Pat’s Story</h2><!-- / .name -->
<h5 class="type">Testimonial | <span class="client">Climate Corp</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/chefhartley.jpg');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=qSSKGHfpE1s">
<div class="video-info">
<hgroup>
<h2 class="name">Chef Hartley</h2><!-- / .name -->
<h5 class="type">Promotional | <span class="client">Hartley</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/Field1.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=qpNHqjcr_kM">
<div class="video-info">
<hgroup>
<h2 class="name">Intelliplanter</h2><!-- / .name -->
<h5 class="type">Promotional | <span class="client">KE Precision AG</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/NF-TitleScreenShot1.png');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=l9pyQvF7fNQ">
<div class="video-info">
<hgroup>
<h2 class="name">Not Forgotten</h2><!-- / .name -->
<h5 class="type">Documentary | <span class="client">Cahaba Park</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/MCGeneral-1.jpg');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=W19cfOlxBKo">
<div class="video-info">
<hgroup>
<h2 class="name">Our Vision</h2><!-- / .name -->
<h5 class="type">Promotional | <span class="client">Morning Center</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
<figure class="portfolio-item" style="background: url('http://www.magnumdigitalcinema.com/wp-content/uploads/2015/06/redbull2.jpg');">
<a href="#" class="play"></a><!-- / .play -->
<a href="https://www.youtube.com/watch?v=AWK4sfHqVfo">
<div class="video-info">
<hgroup>
<h2 class="name">Energy</h2><!-- / .name -->
<h5 class="type">Commercial | <span class="client">Challenge</span></h5><!-- / .type -->
</hgroup>
</div><!-- / .video-info -->
</a>
</figure><!-- .portfolio-item -->
</section>
CSS
.portfolio-item {
display: inline-block;
position: relative;
background-position: center !important;
background-size: cover !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-webkit-background-size: cover !important;
}
/* specific portfolio items */
.portfolio-item:nth-of-type(1) {
width: 70%;
padding-bottom: 30%;
z-index: 0;
}
.portfolio-item:nth-of-type(2),
.portfolio-item:nth-of-type(3) {
position: absolute;
right: 0;
width: 30%;
top: 0;
z-index: 0;
padding-bottom: 15%;
}
.portfolio-item:nth-of-type(3) {
margin-top: 15%;
}
.portfolio-item:nth-of-type(4),
.portfolio-item:nth-of-type(5),
.portfolio-item:nth-of-type(6),
.portfolio-item:nth-of-type(10),
.portfolio-item:nth-of-type(11),
.portfolio-item:nth-of-type(12) {
width: 33.37%;
margin-right: -4px;
margin-top: -11px;
padding-bottom: 17%;
z-index: 0;
display: inline-block !Important;
}
.portfolio-item:nth-of-type(7),
.portfolio-item:nth-of-type(8) {
position: absolute;
left: -2px;
width: 30%;
padding-bottom: 16%;
display: block;
}
.portfolio-item:nth-of-type(7) {
margin-top: -10px;
margin-left: 2px;
z-index: 0;
}
.portfolio-item:nth-of-type(8) {
margin-top: 15%;
margin-left: 2px;
padding-bottom: 16.1% !important;
z-index: 0;
}
.portfolio-item:nth-of-type(9) {
width: 70%;
padding-bottom: 31.5%;
float: right;
top: -10px;
right: 0px;
z-index: 0;
}
.portfolio-item:nth-of-type(2) .video-info h2,
.portfolio-item:nth-of-type(3) .video-info h2,
.portfolio-item:nth-of-type(7) .video-info h2,
.portfolio-item:nth-of-type(8) .video-info h2 {
font-size: 40px;
}
.portfolio-item:nth-of-type(2) .video-info h5,
.portfolio-item:nth-of-type(3) .video-info h5,
.portfolio-item:nth-of-type(7) .video-info h5,
.portfolio-item:nth-of-type(8) .video-info h5 {
font-size: 17px;
}
.portfolio-item:nth-of-type(4) .video-info h2,
.portfolio-item:nth-of-type(5) .video-info h2,
.portfolio-item:nth-of-type(6) .video-info h2,
.portfolio-item:nth-of-type(10) .video-info h2,
.portfolio-item:nth-of-type(11) .video-info h2,
.portfolio-item:nth-of-type(12) .video-info h2 {
font-size: 40px;
}
.portfolio-item:nth-of-type(4) .video-info h5,
.portfolio-item:nth-of-type(5) .video-info h5,
.portfolio-item:nth-of-type(6) .video-info h5,
.portfolio-item:nth-of-type(10) .video-info h5,
.portfolio-item:nth-of-type(11) .video-info h5,
.portfolio-item:nth-of-type(12) .video-info h5 {
font-size: 17px;
}
/* play button */
.portfolio-item .play {
font-family: 'Icons';
color: #fff;
font-size: 60px;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
}
.play:before {
content: '';
display: inline-block;
position: relative;
vertical-align: middle;
height: 100%;
}
.video-info {
background: rgba(0,0,0,0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1000;
text-align: center;
transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
}
.video-info:before {
content: ' ';
vertical-align: middle;
height: 100%;
display: inline-block;
}
.video-info:hover {
opacity: 1;
}
.video-info hgroup {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto !important;
}
.video-info h2, .video-info h5 {
font-family: 'AvenirNext-Regular';
text-align: center;
letter-spacing: 2px;
}
.video-info h2 {
font-size: 50px;
}
.video-info h5 {
color: #d9544c;
font-size: 16px;
margin-top: -25px;
}
.video-info h5 span {
color: #fff;
}
谢谢大家的帮助！
相关文章：
- 具有javascript document.write的响应图像
- 网格状、多响应图像
- 响应图像tinymce图像链接
- jQuery Mobile Listview中的响应图像
- 使用getJSON填充动画响应图像网格
- 响应图像(通过管道和response.end(））会导致奇怪的行为
- 创建响应图像的最简单方法是什么
- 在引导列中垂直居中响应图像
- 引导程序:面板中的响应图像
- 基于JQuery的全宽响应图像滑块已损坏
- 像元srcset响应图像翻转
- 具有翻转/图像交换功能的响应图像地图位于潜水器外部
- 检测宽度并使用响应图像
- 简单的响应图像方法
- 固定位置的响应图像周围的内容
- 响应图像映射与坐标
- 我如何使一个响应图像地图，其中图像和热点自动调整大小与窗口
- 覆盖响应图像
- 响应图像滑块居中图像
- 如何在不影响图像大小的情况下对响应图像进行中心缩放
