0

We want to do a grid of images where each row is any number of images that are the same height but potentially different widths. And the whole thing needs to grow and shrink as the browser width changes.

The best solution I have come up with so far is:

<div id="root">
        <div><img src="img/r1a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
        <div><img src="img/r2a.jpg" width="50%"/><img src="img/r2b.jpg" width="50%"/></div>
        <div><img src="img/r3a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
        <div><img src="img/r4a.jpg" width="100%"/></div>
        <div><img src="img/r5a.jpg" style="max-width:43.733%; min-width:43.732%;"/><img src="img/r5b.jpg" style="max-width:25.584%; min-width:25.583%;"/><img src="img/r5c.jpeg" style="max-width:30.686%; min-width:30.685%;"/></div>
        <div><img src="img/r6a.jpg" style="max-width:33.861%; min-width:33.860%;"/><img src="img/r6b.jpg" style="max-width:16.480%; min-width:16.479%;"/><img src="img/r6c.jpg" style="max-width:33.184%; min-width:33.183%;"/><img src="img/r6d.jpg" style="max-width:16.480%; min-width:16.479%;"/></div>
    <div>

and the CSS:

#root {
            max-width:1480px;
            margin:0 auto;
        }

        #root div {
            white-space:nowrap;
        }

        #root div img {
            padding:0;
            margin:0;
            padding-right:4px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }

The main issue with this is that if the images in the same row have different widths, then their heights are not all the same and it looks bad because the the padding is uneven. It works fine if all the images are the exact same size or if I set that padding-right in the CSS to 0.

Another problem with this is that we have to compute the percentage for each image which is a bit time consuming.

And another problem is that there is a 4 pixel padding/margin on the bottom of the images that I cannot get rid of.

What is the best way to do this? Is there a slight modification I can make to fix some of these issues or should I use a completely different structure?

Here's a screen shot of what the above code produces:

enter image description here

You can see how the heights of the images in the second row are not all the same.

Ryan
  • 5,883
  • 13
  • 56
  • 93
  • 1
    You should take a look at http://getbootstrap.com/ – JD Vangsness Sep 30 '15 at 04:01
  • Look into masonry layout. https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=masonry%20layout A good referance. http://isotope.metafizzy.co/layout-modes/masonry.html – pool pro Sep 30 '15 at 04:11
  • This may help you [zoomwall js](http://ericleong.me/zoomwall.js/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation). – viks Sep 30 '15 at 04:25

1 Answers1

0
#root div{position:relative; overflow:hidden;}  
#root div img{ height:100%}

You can use this css for your image height.

MichaelS
  • 5,941
  • 6
  • 31
  • 46
Navtosh Adhikari
  • 198
  • 11