How to make a grid of responsive images that will not stack on top of each other with small screen resolution

I have seen this posted as a similar question here on SO, so please forgive me if my problem sounds a bit redundant. I believe it is not.

I have a grid of images that ARE NOT UNIFORM in size. I am trying to responsively scale down the grid of images using CSS so that when viewing on different screen sizes (mainly for Android tablets) the images all shrink down uniformly and do not stack on top of each other. I attempted applying the max-width:100% on a class applied to the <img> tags but it only works with the real big images but the smaller ones do not, it just stacks them. Here is the URL (go to the contributors tab).

Below is my CSS:

div#contributor-row-1,
div#contributor-row-2,
div#contributor-row-3 {
    max-width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

div#contributor-row-4 {
    max-width: 100%;
    text-align: center;
}

div#contributor-row-1 img {
    padding-right: 20px;
    max-width: 100%;
}

div#contributor-row-2 img {
    padding-right: 25px;
    max-width: 100%;
}

div#contributor-row-3 img {
    padding-right: 17px;
    max-width: 100%;
}

div#contributor-row-4 img {
    padding-right: 8px;
    max-width: 100%;
}

The full HTML is a bit messy but simply put it looks like this:

<div id="contributor-row-1">
    <img><img><img><img>
</div>
<div id="contributor-row-2">
    <img><img><img><img>
</div>
<div id="contributor-row-3">
    <img><img><img><img>
</div>
<div id="contributor-row-4">
    <img><img><img><img>
</div>

As the images are not uniform in size, it's making life hard for me and I don't think I will be able to achieve what I want. I tried using the solution here but it deals with a uniform grid of images that are all the same size.

My question is, can there be a CSS solution without using media queries for all the possible breakpoints of pixel resolutions? I'd love it if all the images I was working with were the same size, but they are logos of organizations and they are all different dimensions.

Solution

Set max-width: 100% to images and width: 100% to the parent anchors:

div#contributor-row-1 a { width: 100%; }
div#contributor-row-1 img { padding-right: 20px; max-width: 100%; }

Edit: Check this jsfiddle, hope helps