How to put the different size of the images in a container in CSS.

1) Place your image inside <figure> tags, and then use flexbox in the parent element to make them position in the same row, you can use overflow:hidden in the <figure> tag to avoid weird stretching of the images : The html should look like this

<div class="parent">
<figure>
<img src="..." alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="..." alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="..." alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="..." alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
</div>

And your css should look like this

.parent {
  height:300px;
  display:flex;
  width:100%;
}
figure {
  height:100%;
  overflow:hidden;
  margin: 5px;
}
img {
  height:200px;
  width:200px;
}
figcaption {
  font-family:verdana;
  color:#ff0099;
}

Here is a fiddle of with four different sized images: https://jsfiddle.net/tgtgmdwL/

2) Alt attribute is more for accessibility purposes, you can't style it and show it (well, you can, but it is not recommended), use <figcaption> tags as the example above.

If you want to keep the natural ratio of your images, you can fix their height and leave their width:auto. If you want them to fill your containing elements, you can use background-size:cover and background-position:center. Both examples right here