CSS Property Value How to - zoom:300%

Question

We would like to know how to zoom:300%.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#sampleDiv {<!--   w  w  w. j a  v a2 s.  com-->
  width: 100px;
  background-color: Gray;
}
</style>
</head>
<body>
  Zoom div by clicking buttons below:
  <div id="sampleDiv">
    <button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button>
    <br />
    <button onclick="sampleDiv.style.zoom='200%'">Zoom 200%</button>
    <br />
    <button onclick="sampleDiv.style.zoom='300%'">Zoom 300%</button>
    <br />
  </div>
  <!-- Post Info -->
  <div
    style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
    Further Reading: <a
      href='http://css-tricks.com/almanac/properties/z/zoom/'>CSS
      Tricks - Zoom</a>
    <div>
</body>
</html>

The code above is rendered as follows: