Make all images to be of the same size

Question

On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.

Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:

img.resize{
    width:256px;
    height: 256px;
}

You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?

In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).

Now, the black is shorter than the yellow.

Solution

use max-width and set the .item class's height... and overflow: hidden:

Fiddle

4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.

If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.

You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.