CSS Object Fit for Media

Control how images and video fill containers using CSS object-fit and object-position for responsive media display.

.cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
}

.contain {
  object-fit: contain;
  max-width: 100%;
}

Report a problem with this exampleOpens a pre-filled issue on GitHub.