js+jquery+html实现在三种不通的情况下，点击图片放大的效果

js+jquery+html实现在三种不通的情况下，点击图片放大的效果。

　　三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定，高度不固定

第一种情况：图片的父元素宽高固定:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Title</title>
 7         <style>
 8             body {
 9                 padding-bottom: 400px
10             }
11             
12             #aaa {
13                 width: 200px;
14                 height: 200px;
15                 border: 1px solid #000;
16                 overflow: hidden
17             }
18             #aaa img {
19                 width: 100%;
20                 height: 100%;
21                 position: relative;
22                 top: 0;
23                 left: 0
24             }
25             
26             #aaa img:hover {
27                 width: 120%;
28                 height: 120%;
29                 left: -10%;
30                 top: -10%
31             }
32 
33         </style>
34     </head>
35 
36     <body>
37         <h1>图片的父元素宽高固定</h1>
38         <div id="aaa">
39             <img src="../images/图标1.png">
40         </div>
41     </body>
42     <html>

first