I'd like to justify images across a fixed width (exactly how google images does it, eg: here)

Is there a somewhat simple solution for this?

The last resort would be to write a jquery script that calculates how many images it can fit into a row and iterates individually through the images. Seems sort of overkill for something that can be acplished with text using text-align:justify...

I'd like to justify images across a fixed width (exactly how google images does it, eg: here)

Is there a somewhat simple solution for this?

The last resort would be to write a jquery script that calculates how many images it can fit into a row and iterates individually through the images. Seems sort of overkill for something that can be acplished with text using text-align:justify...

• javascript
• jquery
• css

• 1 Lets see how far have you reached :) – Starx Commented Mar 14, 2012 at 10:35

4 Answers 4

Use display: inline-block; for elements with images and text-align: justify; for parent element. Example:

<ul class="images">
    <li><img src="..."/></li>
    ...
</ul>

and CSS:

.images{text-align: justify;}
.images li{display: inline-block;}

If you look for a powerful tool to justify images across a fixed width, this jQuery plugin may help you: https://github./brunjo/rowGrid.js

Demo

Make sure you have an outer container defined say a div or section with fixed width and try to float the image container within it to achieve it

<div id="outer-container" style="width:800px;height:400px;">
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
</div>

You may use display:inline-block instead of float:left to achieve it.but display:inline-block can be used based on your situation.

On the long run it'll have many issues that is initially unthought of. Check out my plugin Justified Image Grid (do a google search). I did my best to replicate how flickr shows it with dynamic row height and minimal cropping.