Fit image inside a div using css flex properties

img-fit-in-div.html

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

img-fit-in-div.scss

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  .img-to-fit {
    flex: 1;
    height: 100%;
  }
}