CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Jesse Winton
Jesse Winton

Reputation: 696

Responsive Image Grid with Different Heights and Widths

I need to be able to create a responsive image grid with different image widths, (link to an image below.)

http://jessewintondesign.com/imagegrid.jpg

Here's what I have right now.

http://magnumdigitalcinema.com/dev

This ^ fits and looks good on my 27" iMac, but isn't responsive, and I haven't been able to figure out a good solution for it due to the varying heights and widths. Masonry.js didn't work for me as I'm developing this site in Wordpress and the grid is created dynamically. I need to know if there is another option for this. Thanks to all in advance!

Upvotes: 1

Views: 4412

Answers (3)

Jesse Winton
Jesse Winton

Reputation: 696

I figured this out. Simply use padding-bottom with percentage values instead of pixel values and add the images as CSS background images. Since it's in Wordpress, the background images are loaded via the featured image on each post.

Here's the basic HTML & CSS. Again, pieces of the HTML are dynamic because it is a Wordpress theme.

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;
}

Thanks for the help folks!

Upvotes: 0

user5061077
user5061077

Reputation:

Here are the solution for your query.

Make all images as per same ratio and fix (max-width:100%;) If you not mark images as same ratio than you should have to use different codes on(height /width) at media query.

Upvotes: 1

Ben Leitner
Ben Leitner

Reputation: 1532

This is a potential helpful resource: http://susy.oddbird.net/

Also, with CSS you can do this as well. Look at this past question: simple CSS grid with unequal image sizes

Upvotes: 3

Related Questions