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

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

this should work i think!

i’m on the train right now, so I can’t give you a pen.

You can position the image absolute in the parent div (this should be relative) and translateY so it is centered.

Hope this is what you want to do 😉

use this!

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

Try this:

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;
}

added calc to .container and display:flex on .item, removed some unused properties.
Codepen: https://codepen.io/Liveindream/pen/NWPygpx

I’m trying to display an app bar and three images in a column, that uses 100% of the height of the screen. The images are supposed to use the whole width of the column with the rest being cut off. I can get it working with just divs, but I’m having trouble when using images.

Here is a version to illustrate how it should look like. This has an app bar of height 50 and three “images” that fill the rest of the space:

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

And here is what I get with images. The images stretch the heights of my divs and ultimately of everything else, resulting in that scrollbar. Instead I need thin slices of the images.

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

The code is the same in both cases. One just uses text instead images.