JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<style>
div {
  width:400px;height:280px;
  border:1px solid #CCC;
  margin:10px;
}
</style>
  <h3>一、zoom和scale的缩放</h3>
<div>
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="transform:scale(0.8)">
</div>
<div>
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="zoom:0.8">
  
</div>
<div>
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="
    -webkit-transform-origin:top left;
    -webkit-transform:scale(0.8);
  ">
</div>
  
  <h3>二、zoom和scale的缩放图形大小（原尺寸400*280）</h3> 
<div>
  <img id="scale" src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="transform-origin:top left;transform:scale(0.8)">
</div>
  <h3 id="scaleContent"></h3>
<div>
  <img id="zoom" src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="zoom:0.8">

</div>
  <h3 id="zoomContent"></h3>
  
<h3>三、zoom和scale的空间大小</h3> 
<div style="margin-bottom:50px;">
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="transform-origin:top left;transform:scale(0.8)">
  <p>测试文字</p>
</div>
<div>
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 style="zoom:0.8">
<p>测试文字</p>
</div>
  
<h3>四、zoom和scale的文字缩放</h3> 
<div style="transform-origin:top left;transform:scale(0.5)">
  <img src="http://img.52fuqing.com/upload/editor/2015-11-4/2015114231851443g12a5.jpg" alt="" width=400 height=280 >
  <p>测试文字</p>
</div>
<div style="zoom:0.5">
  <img...

JavaScript

$("#scaleContent").html("scale(0.8)后图形尺寸为"+$("#scale").width()+"*"+$("#scale").height());

$("#zoomContent").html("zoom(0.8)后图形尺寸为"+$("#zoom").width()+"*"+$("#zoom").height());