Image Zoom FORK

"zoom" using background-size (+-)

by trentHarlem

HTML

<div class='article'>
  <div id='image-container'>
<!--   <img src='https://picsum.photos/720'/>
  </div>
   -->
  <div class='edit'>
    <button id='zoom'>
      zoom +
    </button>
    <button id='zoomOut'>
      zoom -
    </button>
  </div>
</div>

CSS

body {
  background-image: url('https://www.rollingstone.com/wp-content/uploads/1972/01/R1347_FEA_Miley_Dtighter.jpg?resize=3000,1500&w=1400');
}
.article {
  position: absolute;
}

#image-container {
  display: block;
  resize: both;
  height: 200px;
  width: 200px;
  
  background-image: url('https://picsum.photos/720');
  
  /* background: url('https://picsum.photos/720'); */
  
  border: 1px solid black;
  
  position: relative;
  background-size: 100%;
  overflow: auto;
}

/* #image-container img {  
}
 */
.edit {
  position: fixed;
  bottom: 0px;
}
::-webkit-resizer {
  height: 50px;
  width: 50px;
  background-color: #ff0a;
  border-top-left-radius: 100%;
}

JavaScript

let zoom = document.getElementById('zoom');
let s = 100;
zoom.addEventListener('click', function zoom() {
  if (s < 600) {
    s += 10;
    let img = document.getElementById("image-container")
    img.style.backgroundSize = `${s}%`;
  }
  console.log('ZOOM IN');
});

let zoomOut = document.getElementById('zoomOut');

zoomOut.addEventListener('click', function zoomOut() {
  if (s > 100) {
    s -= 10;
    let img = document.getElementById("image-container")
    img.style.backgroundSize = `${s}%`;
  }
  console.log('ZOOM OUT');
});