CODEWITHSUNDEEP
htmlcssimagelayoutresponsive-design
Chris
Chris

Reputation: 1074

Vertical alignment of responsive images of unknown height using CSS

I'm trying to layout images vertically aligned bottom (see picture below) in a responsive layout with images of unknown heights.

The images are scaled to fit the width of the column, but the heights vary and I cannot find out what it is in advance.

enter image description here

Unfortunately at the moment the closest I have managed to get is this

enter image description here

I'd really like to avoid using javascript if possible, because the number of columns will change depending on the screen width using media queries - which will make the javascript more complex.

The CSS I am using at the moment is

#catalogue-items {
  @include clearfix;
  margin: 40px 0;

  .catalogue-item {
    width: 20%;
    float: left;
    margin-left: 4%;
    @include box-sizing(border-box);
    margin-bottom: 20px;

    img {
      width: 100%;
    }

    p {
      font-family: sans-serif;
      font-size: 0.8em;
      padding: 0.5em;
    }

    &:nth-child(4n + 1) {
      clear:left;
    }
  }
}

With the nth-child selector changing using media queries.

Is there any way to do this?

Upvotes: 3

Views: 2288

Answers (1)

Jasper de Vries
Jasper de Vries

Reputation: 20263

I would solve it using display: inline-block

HTML:

<ul>
    <li>
        <img width="50" height="100" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="125" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="75" src="/img/logo.png"/><br/>
        Description
    <li>
<ul>

CSS:

ul {
    margin-left: -10px;
}

li {
    display: inline-block;
    margin: 0 10px 0 10px;
}

img {
    border: 1px solid red;
}

See Fiddle

Upvotes: 2

Related Questions