创新项目实训（八）

写组件时要展示相应的信息，其中包括一张预览图片。之前在看携程的网站的时候看到它的搜索结果里鼠标移到图片上的时候会有一个放大的效果，于是自己也试了一下，效果还不错。

要实现这个效果，需要有一个固定大小的容器（我使用的div），设置好它的高度和宽度，设置overflow为hidden（这步很重要，不然图片放大的时候可能会出现滚动条），然后将img标签放在这个div里，设置img的hover样式为transform: scale(1.1);，再为img添加样式transition: all 0.5s;添加变换时间，不然变换会没有过渡效果，很难看。这样就实现了图片在框里变大的效果。

代码如下：

		<div class="item_pic" fit="contain">
          <el-image :src="imgsrc" lazy class="img">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>

.item_pic {
  display: -webkit-box;

  -webkit-box-align: center;

  -webkit-box-pack: center;
  width: 200px;
  height: 200px;
  margin-left: 5%;
  margin-top: 15px;
  margin-bottom: 3%;
  overflow: hidden;
}
.img{
 transition: all 0.5s;
}
.img:hover{
  transform: scale(1.1);
}