object-fit equivalents in pure css

object-fit-css.md

object-fit equivalents in pure css

HTML

<div class="container">
  <img src="http://thetvdb.com/banners/fanart/original/78804-61.jpg">
</div>

Object-fit:contain

.container {
  position:relative;
  height: 600px;
  width: 600px;
}
.container img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

Object-fit: cover

This is AFAIK not possible without javascript. Depending on the aspect ratio of the containing element vs. the aspect ratio of the image you have to set either

width: 100%;
height: auto;

or

width: auto;
height: 100;

.container {
  width: 540px;
  height: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.container img {
  width: 100%;
  height: auto;
}

If the image is a smaller size, this CSS won't scale up as object-fit: contain does

Thank You