CSS масштабирует несколько изображений для соответствия пропорциям просмотра

Я создаю галерею, где я хочу перечислить все изображения из альбома на одной странице: Стиль большой картинки:

В отличие от Big Picture, я хочу, чтобы изображения пропорционально масштабировались, чтобы соответствовать ширине контейнера div (.section-images, который установлен на margin: auto 2em;, поэтому его ширина равна ширине пользовательского браузера минус 2*2em), не делая их более 90% высоты окна просмотра.

Как вы думаете, портретная фотография 400x600 при масштабировании в соответствии с шириной будет настолько длинной, что пользователь не увидит все изображение на экране, поэтому мне нужно ограничить масштабирование ширины, чтобы она не превышала 90% высоты.

<section class="section-images">
    <div class="image-box">
        <div class="image-large">
            <a href="#"><img foo1></a>
        </div>
        <div class="image-description">
          blabla1
        </div>
        ... MORE IMAGES WITH DESCRIPTONS ...
    </div>
    etc
</section>

Под каждым изображением у меня есть .image-description, высота которого будет варьироваться.

Важно то, что в любое время в окне просмотра должно находиться одно изображение (так .image-large), независимо от того, пейзаж или портрет.

Я хотел бы сделать это, используя только CSS, если возможно, и только javascript, если CSS невозможно.

Ответ 1

Решение: (Я удалил большинство ваших контейнеров, чтобы было проще понять и работать с ними)

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>

Ответ 2

Вы также можете использовать блоки видовых экранов для этого, не меняя html, body для IE9 +.

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

Ответ 3

Задайте высоту контейнера section-images явно, и установите его overflow на hidden.