SCSS Responsive height to width ratio trick.

responsiveWidthHeight.scss

.item {
  background-attachment: inherit;
  background-position: center;
  background-size: cover;
  display: inline-block;
  height: auto;
  position: relative;
  width: 100%;

  &::before {
    content: '';
    display: block;
    padding-top: 50%; // H / W * 100% (Fallback)
    padding-top: calc(100 / 200 * 100%); // H / W * 100%
  }
}