Make all images to be of the same size
<p>On my way on implemented <a href="https://stackoverflow.com/questions/39259932/place-the-prev-next-buttons-to-the-top-in-boostrap-carousel">my idea</a>, 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.</p>

<p>Here is the <a href="https://jsfiddle.net/gsamaras/dxn7hwsb/9/" rel="nofollow noreferrer">jsFiddle</a> where I display the issue in slide 1, and here is just one of the many attempts I made:</p>

<pre><code>img.resize{
    width:256px;
    height: 256px;
}
</code></pre>

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

<p>In other words, what I want is every image to be of the same <code>width x height</code> 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 t<a href="https://www.google.com/search?q=snoopy&amp;rlz=1C5CHFA_enUS701US702&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwiQl8645OzOAhUUzGMKHWMvCzwQ_AUICCgB&amp;biw=1331&amp;bih=1307" rel="nofollow noreferrer">he search engines give you</a> (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).</p>

<p>Now, the black is shorter than the yellow.</p>