Responsive images size 100% but max-width

Question

I've created a responsive site and the images are set to:

max-width: 100%;
height: auto;

This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.

I've tried adding height="170" and width="190" but this doesnt seem to work.

How can i have them set to the same size without manually resizing all images.

Example is here; http://www.cartoonquiz-answers.com/Solutions/Level8

As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.

thanks

Answer 1

If you want to force all images to the same size, just set a general CSS rule:

img
{
    width: 190px;
    height: 170px;
}

---

If you want them to scale, use percentages instead:

img
{
    width: 100%;
}

This will force all images to fill their containers (and will maintain their aspect ratios).

Answer 2

You could force an aspect ratio:

.reviewname:before {
    display: block;
    content: "";
    padding-top: 80%; /* aspect ratio */
}
.reviewname {
    position: relative;
}
.reviewname > img {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0px;
}

Answer 3

I think you have two options:

1. Use CSS background images (see below) or...
2. Crop/Resize the images to all the same height and width.

Here's a handy way to use background images: (not supported in all browsers)

<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">

.bgimg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}