Responsive focuspoint on image with object-position

index.html

<figure class="focus__area">
  <div class="focus__picker">
    <img class="focus__picker__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" />
    <span class="focus__picker__indicator"></span>
  </div>
  <p class="focus__area__info">⬅ choose<br /> focuspoint<br />here!</p>
  <p class="media__info">Use bigger screen to pick a focus point!</p>
  <img class="focus__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" />
  <figcaption class="focus__caption">
    focus-point: <span></span>
  </figcaption>
</figure>

responsive-focuspoint-on-image-with-object-position.markdown

Responsive focuspoint on image with object-position

A simple image focuspoint implementation based on the new object-position and object-fit css properties.

This is just a proof of concept.

For browser support see: http://caniuse.com/#feat=object-fit

Image stolen from: http://www.kilianschoenberger.de/ (Sorry :) )

A Pen by Karsten Buckstegge on CodePen.

License.

script.babel

const focusArea = document.querySelector('.focus__area');
const focusPicker = focusArea.querySelector('.focus__picker');
const focusPickerIndicator = focusArea.querySelector('.focus__picker__indicator');
const focusImage = focusArea.querySelector('.focus__image');
const focusCaptionSpan = focusArea.querySelector('.focus__caption span');

const setFocusPoint = (e) => {
  const focusOffset = [e.offsetY, e.offsetX];  
  const imageSize = [focusPicker.clientHeight, focusPicker.clientWidth];
  
  const focusPointY = (((focusOffset[0]) / imageSize[0]) * 100).toFixed(1);
  const focusPointX = (((focusOffset[1]) / imageSize[1]) * 100).toFixed(1);
  
  focusCaptionSpan.innerHTML = `Y: ${focusPointY}, X: ${focusPointX}`;
  
  focusImage.style.objectPosition = `top ${focusPointY}% left ${focusPointX}%`;
  focusPickerIndicator.style.top = `calc(${focusPointY}% - 5px)`;
  focusPickerIndicator.style.left = `calc(${focusPointX}% - 5px)`;
};

focusPicker.addEventListener('click', setFocusPoint);

style.scss

html, body {
  height: 100%;  
}

.focus__area__info,
.media__info {
  position: absolute;
  color: #fff;
  top: 0;
  left: 22%;
  margin: 0;
  padding: 20px;
  background: rgba(0, 120, 100, .7);
}

.media__info {
  display: none;
}

.focus__caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 20px;
  background: rgba(0, 120, 100, .7);
  color: #fff;
}

// The relevant stuff

.focus__area {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.focus__picker {
  position: absolute;
  width: 20%;
  border: 4px solid black;
  cursor: crosshair;
}

.focus__picker__image {
  width: 100%;
}

.focus__picker__indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .7);
  border-radius: 50%;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}

.focus__image {
  width: 100%;
  height: 100%;
  
  object-fit: none;
  object-position: top 50% left 50%;
}


@media ( max-width: 700px ), ( max-height: 300px ) {
  .focus__caption, .focus__area__info, .focus__picker {
    display: none;
  }
  .media__info {
    display: block;
    left: 0;
    margin: 0 2%;
  }
}