Object-fit not affecting images

Question

I\'ve been trying to use object-fit on a few images placed inside article elements, but it doesn\'t seem to affect them at all.

The desired

Answer 1

I changed the container, image and the parent of the container to box-sizing: content-box since img is replaced and switched the object-fit: cover on the container instead of the img. Since img is expected to be cropped, a height of 100vh and a width of 100% and +22hw offset worked good on the top four, there seems to be a little distortion both the bottom two img, not much. object-position still doesn't work for me (never does) :-\

http://codepen.io/01/pen/zrvdaz?editors=110

body{
    margin: 0 auto; padding: 0;
}
main{
    min-height: 70vh;
    padding: 0;
}
main > section.posts{
    box-sizing: content-box;
    margin: 0; padding: 0;
    display: flex;
    flex-flow: row wrap;
}
main > section.posts > article{
  outline: 1px solid red;
    width: 22vw;
    min-height: 100vh;
    margin: 0; padding: 0;
    flex-grow: 1;
    overflow: hidden;
    box-sizing:content-box;
  object-fit: cover;

}
main > section.posts > article > img{
 display: block;
  box-sizing:content-box;
  max-height: 100vh;
  width: calc(100% + 22vh);
  object-position: 100% 100%;
}