CODEWITHSUNDEEP
cssresponsive-designinline
user2028856
user2028856

Reputation: 3183

Force display inline for responsive images

I need to display a grid of images 5x3. This grid needs to keep the same format and size regardless of screen resolution. The images themselves will resize responsively.

I have a list of images displayed in an inline-block like this:

<div class="gridView">
  <ul>
    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>
  </ul>
</div>

The CSS is like this:

.gridView {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    text-align: center;
    width: 100%;
}

.gridView ul li {
    height: 100%;
    max-height: 150px;
    max-width: 200px;
    width: 100%;
}

Right now when I resize the window the grid doesn't keep it's size fixed. How do I ensure that the grid stays the same but only the images resize themselves?

Upvotes: 0

Views: 3516

Answers (2)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

If you would like to keep the layout structure the same, as in:

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

Then you will not require a liquid grid system, but liquid images instead. What I would do is the following: Change the .gridView ul li styling so that instead of a maximum-height and width, you set a simple height and width declaration.

.gridView ul li {
height: 150px;
width: 200px;
}

Then add an image class to make the images responsive:

.img {
max-width: 100%
height: auto;
}

Of course, the image file sizes should be 150px x 200px at their max.

This way, your grid won't collapse as your browser width gets smaller and your images will get smaller to fit the grid.

Hope this helps!

Upvotes: 1

AnilkaBobo
AnilkaBobo

Reputation: 260

width: 100%; will always change size of element relative to parent element/window. for fixed width you need fixed width. Simple as that like:

width: 1200px;

Upvotes: 0

Related Questions