<label for="zoomSlider">Zoom Level:</label>
<input type="range" id="zoomSlider" min="0.5" max="2" step="0.1" value="1">
<span id="zoomValue">1</span>

<div id="mainWrapper">

  <a id="sizeSmall">a</a>
  <a id="sizeMed">A</a>
  <a id="sizeLarge"><big>A</big></a>
  <br>
  <img src="https://assets.codepen.io/1712301/IMG_6944.png" alt="" />
  
  <div style="display: flex; align-items: center;    flex-direction: row;    flex-wrap: wrap;">
    <div style="width:500px;border: 1px solid cyan;">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo dicta doloremque sunt explicabo laboriosam similique, id beatae itaque tenetur aliquam eaque necessitatibus nulla adipisci cupiditate, incidunt amet dolore impedit hic veritatis? Voluptatem adipisci minima ex id ab praesentium officiis dolores? Modi eius libero ex? Illo non est error? Quasi, repudiandae!
      </p>

      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, ab!</p>
    </div>

    <div style="width:500px;border: 1px solid cyan;">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo dicta doloremque sunt explicabo laboriosam similique, id beatae itaque tenetur aliquam eaque necessitatibus nulla adipisci cupiditate, incidunt amet dolore impedit hic veritatis? Voluptatem adipisci minima ex id ab praesentium officiis dolores? Modi eius libero ex? Illo non est error? Quasi, repudiandae!
      </p>

      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, ab!</p>
    </div>
    
  </div>
</div>
body {
  background: #444;
  color: white;
  border: 1px solid red;
  width: fit-content;
}

#mainWrapper {
  width: fit-content;
  border: 1px solid lime;
}
document.getElementById("sizeSmall").addEventListener("click", function (e) {
  document.getElementById("mainWrapper").style.zoom = "1";
});
document.getElementById("sizeMed").addEventListener("click", function (e) {
  document.getElementById("mainWrapper").style.zoom = "1.2";
});
document.getElementById("sizeLarge").addEventListener("click", function (e) {
  document.getElementById("mainWrapper").style.zoom = "1.4";
});

document.getElementById("zoomSlider").addEventListener("input", function (e) {
  var zoomLevel = e.target.value;
  document.getElementById("mainWrapper").style.zoom = zoomLevel;
  document.getElementById("zoomValue").textContent = zoomLevel;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js