html:
    （1）图片直接在style里面设置，”width=100%”

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../css/125缩放.css">
    10. </head>
    11. <body>
    12.     <div class="box1"></div>
    14.     <div class="an-wrapper">
    15.         <img src="../img/an.jpg" alt="" style="width:100%">
    16.     </div>
    17. </body>
    18. </html>

    css:
    （1）通过transform: scale(n);去设置缩放大小
    （2）对于图片的缩放，采用transtion:2s;控制缩放时间，overflow:hidden;控制溢出

    .box1 {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background-color: #bfa;
}

.box1:hover {
    transform: scale(1.5);
}

.an-wrapper {
    width: 200px;
    height: 200px;
    transition: 2s;
    overflow: hidden;
}

.an-wrapper:hover {
    transform: scale(1.2);
}

    image.png