Home Hero

hero-home.css

.home-hero
.success-story-detail-hero
  position: relative

[centered-image]
  margin: 0
  height: 100%
  overflow: hidden
  position: absolute
  top: 0
  width: 100%

  .success-story-detail-hero &
    +md()
      width: 50%

.portrait
  height: 100%
  position: absolute
  left: 50%
  top: 0
  transform: translate3d(-50%, 0, 0)
  width: auto
  max-width: none

.landscape
  height: auto
  position: absolute
  top: 50%
  transform: translate3d(0, -50%, 0)
  width: 100%
  max-width: none

hero-home.html

<section class="home-hero">
	<figure centered-image>
	    <img src="images/bg-home-hero-large-2@2x.jpg" class="landscape" alt="" srcset="images/bg-home-hero-phone-2@2x.jpg 750w, images/bg-home-hero-tablet-2@2x.jpg 1242w, images/bg-home-hero-large-2@2x.jpg">
	</figure>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-sm-12 col-lg-8">
                <h1 class="home-hero__title">Campaign management for the converging world.</h1>
                <p class="copy align-center">Reach the right audiences with integrated marketing solutions for programmatic, social and TV. All in one, independent platform.</p>
            </div>
        </div>
    </div>
</section>

hero-home.js

function assignRatio() {

  var $centeredImages = $('[centered-image]');

  if (!$centeredImages.length) {
    return;
  }

  $centeredImages.each(function (index, figure) {

    var figureStyle = window.getComputedStyle(figure);
    var image = figure.querySelector('img');
    var imageStyle = window.getComputedStyle(image);
    var imageRatio = parseInt(imageStyle.width, 10) / parseInt(imageStyle.height, 10);
    var figureRatio = parseInt(figureStyle.width, 10) / parseInt(figureStyle.height, 10);

    if (imageRatio >= figureRatio) {
      image.classList.remove('landscape');
      image.classList.add('portrait');
    } else {
      image.classList.remove('portrait');
      image.classList.add('landscape');
    }

  });

}

This method for creating a responsive full bleed image is dependent on the image being wrapped in a figure tag with the empty data attribute centered-image. Giving the img tag a class of landscape will minimize flashiness on load, but it’s not required since these classes get added by the Javascript. The assignRatio function should be called on init and then again when the window is resized. It’s ideal to throttle the resize on this function especially when there are a large number of these types of images on the same page, but not required. We’ve amended this code to work in the current structure. One change we need to make is adding a position: relative to the wrapper immediately outside of the figure tag.