Отображать изображения во flexbox на высоте 100% без полосы прокрутки

Question

Я пытаюсь отобразить панель приложения и три изображения в столбце, который использует 100% высоты экрана. Изображения должны использовать всю ширину столбца, а остальные будут обрезаны. Я могу заставить его работать только с divs, но у меня возникают проблемы при использовании изображений.

Вот версия, иллюстрирующая, как это должно выглядеть. Это панель приложения высотой 50 и три «изображения», которые заполняют остальное пространство:

https://codepen.io/Meerpohl/pen/zYxRKRV

И вот что я получаю с изображениями , Изображения растягивают высоты моих div'ов и, в конечном итоге, всего остального, в результате чего появляется полоса прокрутки. Вместо этого мне нужны тонкие кусочки изображений.

html, body {
  height: 100%;
  margin: 0;
}
.root {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.appbar {
  height: 50px;
  text-align: center;
  background-color: coral;
}
.container {
  flex: 1;
}
.item {
  height:33.33%;
  overflow:hidden;
}
img {
  width: 100%;
  object-fit: cover;
}

<div class="root">
  <div class="appbar">
  This is a nice app bar
  </div>
  <div class="container">
      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>

      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>

      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>
  </div>
</div>

https://codepen.io/Meerpohl/pen/eYmVdro

Код одинаков в обоих случаях. Один просто использует текст вместо изображений.

Answer 1

.item {
  position: relative;
  height:33%;
  overflow:hidden;
}

img {
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
  object-fit: cover;
}

это должно работать, я думаю!

Answer 2

используйте это!

img {width: 100%; object-fit: cover; max-height: 33.33vh; }

Answer 3

Попробуйте:

html, body {
  height: 100%;
  margin: 0;
}

.root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.appbar {
  height: 50px;
  background-color: coral;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
} 

.item {
  overflow: hidden;
  display: flex;
  flex: 1;
}

img {
  width: 100%;
  object-fit: cover;
}

добавлено значение c для .container и display:flex для .item, удалены некоторые неиспользуемые свойства. Codepen: https://codepen.io/Liveindream/pen/NWPygpx

Answer 4

Я сейчас нахожусь в поезде, поэтому я не могу дать вам ручку.

Вы можете расположить абсолютное изображение в родительском div (это должно быть относительно) и перевести Y так, чтобы оно было отцентрировано .

Надеюсь, это то, что вы хотите сделать;)