vue 鼠标悬浮图片放大效果

<div class="test"></div>

.test{
    width: 200px;
    height: 200px;
    background: orange;
    transition: all 0.4s;
    -moz-transition:all .4s;
    -webkit-transition:all .4s;
    -o-transition:all .4s;
    background: url('https://picsum.photos/300/600?random=5');
    background-repeat:no-repeat;   /* 不会重复 */
    background-position: center;   /* 是为了让图片放大的时候从中部放大，不会偏移 */
    background-size: 100% 100%;
  }
  .test:hover{
    background-size: 110% 110%;
  }

如果用img来做，悬浮放大的时候图片的大小会发生改变，所以采用背景图的方式，改变background-size的大小，这样即使图片被放大，但是整个图的宽高不变，只是背景被放大了而已，这样就不会溢出容器。