CSS scale several images to fit viewport keeping aspect ratio

Question 1

Solution : (I stripped most of your containers to make it simple to understand and work with)

html,
body,
.section-images {
  height: 100%;
  margin: 0;
}
.section-images {
  margin: auto 2em;
  text-align: center;
}
img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}

<section class="section-images">
  <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
  <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
  <div class="image-description">blabla2</div>
  <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>

Explanation :

This solution is based on the fact that percentages sizes (width and height) are relative the size of the parent element.

Considering .section-images is a direct child of <body> start by setting :

html, body, .section-images {
    width:100%;
    height:100%;
    margin:0;
}

So the direct parent of the images equals viewport size.

Then, you can size your images easily using :

img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90%;
}

Images will never exceed 100% width and 90% height of viewport while keeping their aspect ratio. And they will stay in the flow of the document.

Question 2

You can also use viewport units to do this without changing html, body for IE9+.

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90vh;
}

Question 3

Set the height of the container section-images explicitly, and set its overflow to hidden.