Question

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

http://jessewintondesign.com/imagegrid.jpg

这就是我现在所拥有的。

http://magnumdigitalcinema.com/dev

这对于我的27＆＃34; iMac，但没有响应，由于不同的高度和宽度，我无法找到一个好的解决方案。 Masonry.js对我不起作用，因为我在Wordpress中开发这个网站并且网格是动态创建的。我需要知道是否还有其他选择。提前全部感谢！

Answer 1

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

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

Answer 2

以下是您的查询解决方案。

按相同比例制作所有图像并修复（最大宽度：100％;）如果您没有将图像标记为与在媒体查询时使用不同代码（高度/宽度）相同的比例。

Answer 3

我想出来了。只需使用百分比值padding-bottom代替像素值，并将图像添加为CSS背景图像。由于它在Wordpress中，背景图像通过特色图像加载在每个帖子上。

这是基本的HTML＆amp; 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;
}

感谢帮助大家！

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

3 个答案: