1

So, I didn't write this but now I'm trying to fix it...

I have a fixed width div which displays 5 images across it. These images are all the same size, but we want to scale them based on a css class. This is being done in drupal so actually scaling the images would be tricky and the current solution was to scale them in CSS. The problem is that when doing this, the spacing between each image is not equal.

A picture is worth a thousand words so here is a fiddle with the current implementation: http://jsfiddle.net/jCa7j/1/

And a graphical view of what I'm talking about:

enter image description here

So the goal here is to have this same output, but have an equal distance between each image. I've tried a lot of things and have had little luck... I've found methods for doing this with just text, or with fixed width images, but nothing that seems to do the trick here. I've also tried putting a width in pixels on .field-content and then width 100% on img so that the divs are all the same width as the scaled image but with that I still haven't been able to figure out how to get them equidistant.

I suppose doing this in javascript is an option as well. I'd prefer straight css but if it's impossible we can do it with javascript.

Any input?

Current example html:

<div id="container">
<div class="field field-1">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-2">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-3">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-4">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-5">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>

And current example css:

#container {
    width: 730px;
}

.field {
    width: 142px;
    display: inline-block;
    text-align: center;
}

.field img {
    height: auto;
}
.field-1 img {
    width: 70%;
}

.field-2 img {
    width: 93%;
}

.field-3 img {
    width: 100%;
}

.field-4 img {
    width: 91%;
}

.field-5 img {
    width: 79%;
}
2
  • A table might work. Try display: table and display: table-cell then you can center the image in the cell.
    – elclanrs
    Jan 27, 2014 at 3:42
  • I've also tried putting a width in pixels on .field-content and then width 100% on img so that the divs are all the same width as the scaled image but with that I still haven't been able to figure out how to get them equidistant. That should have done the job, why didn't it work? Jan 27, 2014 at 3:54

2 Answers 2

0

This should be what you're after:

#container {
    width: 730px;
}    
.field {
    display: inline-block;
    text-align: center;
}
.field-1 {
    width: 115px;
}
.field-2 {
    width: 125px;
}
.field-3 {
    width: 135px;
}
.field-4 {
    width: 125px;
}
.field-5 {
    width: 115px;
}
.field img {
    height: auto;
    width: 100%;
}
1
  • This is what I tried. But what it does is just make all the containing divs the same size as the scaled image. It doesn't spread them out so they are all just stacked up against each other on the left, and I haven't been able to figure out a way to make them 'justify' so to speak. Putting text-align: justify on #container doesn't do anything. Here's an updated fiddle with this: jsfiddle.net/jCa7j/3
    – Chad
    Jan 27, 2014 at 4:00
0

I've simplified things a bit.

FIDDLE

CSS

#container {
    width: 730px;
    border: 0px solid black;
}

.field {
    width: 142px;
    float: left;
    text-align: center;
    margin-left: 2px;
}

Then you just play with the margin-left, container size/position, image size etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.