media-embed.css

/** @define MediaEmbed */

/**
 * Media embeds
 *
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 * Improved https://github.com/suitcss/components-flex-embed
 */

/**
 * MediaEmbed component.
 *
 * Modifier classes:
 *   - MediaEmbed--ratio-2by1
 *   - MediaEmbed--ratio-3by1
 *   - MediaEmbed--ratio-4by3
 *   - MediaEmbed--ratio-16by9
 *   - MediaEmbed--center-y
 */

.MediaEmbed {
  display: block;
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

/**
 * Modifier: 3:1 aspect ratio
 */

.MediaEmbed--ratio-3by1 {
  padding-bottom: calc(100% / 3);
}

/**
 * Modifier: 2:1 aspect ratio
 */

.MediaEmbed--ratio-2by1 {
  padding-bottom: 50%;
}

/**
 * Modifier: 16:9 aspect ratio
 */

.MediaEmbed--ratio-16by9 {
  padding-bottom: 56.25%;
}

/**
 * Modifier: 4:3 aspect ratio
 */

.MediaEmbed--ratio-4by3 {
  padding-bottom: 75%;
}

/**
 * Fit the content to the aspect ratio
 */

.MediaEmbed__content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * Center embedded media element horizontally (default).
 * This is important for embedded media smaller than container.
 */

.MediaEmbed__content > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/**
 * Center embedded media element vertically.
 */

.MediaEmbed--center-y .MediaEmbed__content > * {
  position: relative;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

media-embed.twig

<div class="MediaEmbed {{ image.modifiers|join(' ') }}">
  <div class="MediaEmbed-content">
    <img class="MediaEmbed-contentImage lazyload" src="" alt="{{ image.attributes.alt }}" data-src="{{ image.attributes.src }}" data-srcset="{% for image in image.attributes.srcset %}{{ image.file }} {{ image.size }}{% if not loop.last %}, {% endif %}{% endfor %}">
  </div>
</div>