具有不同高度和宽度的响应式图像网格答案

【问题标题】：Responsive Image Grid with Different Heights and Widths具有不同高度和宽度的响应式图像网格
【发布时间】：2015-09-19 08:43:05
【问题描述】：

我需要能够创建具有不同图像宽度的响应式图像网格，（链接到下面的图像。）

http://jessewintondesign.com/imagegrid.jpg

这是我现在拥有的。

http://magnumdigitalcinema.com/dev

这个 ^ 在我的 27 英寸 iMac 上很合适并且看起来不错，但没有响应，而且由于高度和宽度不同，我无法找到一个好的解决方案。Masonry.js 没有为我工作，因为我正在 Wordpress 中开发此网站，并且网格是动态创建的。我需要知道是否有其他选项。提前感谢所有人！

【问题讨论】：

您可以使用 CSS (jsfiddle.net/gq8xkjmo) 为不同的高度但相同的宽度做到这一点。

标签： javascript jquery html css wordpress

【解决方案1】：

这是一个潜在的有用资源：http://susy.oddbird.net/

此外，使用 CSS 您也可以做到这一点。看这个过去的问题：simple CSS grid with unequal image sizes

【讨论】：

【解决方案2】：

这里是您查询的解决方案。

按照相同的比例制作所有图像并修复 (max-width:100%;) 如果您没有将图像标记为相同的比例，那么您应该在媒体查询中使用不同的代码（高度/宽度）。

【讨论】：

【解决方案3】：

我想通了。只需使用带有百分比值而不是像素值的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;
}

感谢各位的帮助！

【讨论】：

请在此处而不是在外部页面上提供您的鳕鱼