CodePen Embed - CSS Object Fit

<div class="wrapper">
  <img src="https://placekitten.com/200/400" />
</div>

*{
  box-sizing: border-box;
}

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

body{
  display:flex;
  overflow:hidden;
}

.wrapper{
  width: 100%;
  height: 100%;
  background-color:yellow;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;
}
.wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

This Pen is owned by Fabio Franchino on CodePen.

See more by @abusedmedia on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.