vue3：实现图片放大浏览功能组件

两种实现方式：

1.将原本的盒子与img标签放大至全屏浏览。

2.新建一个div和img标签进行全屏浏览。这样不会改变布局。

第一种：

效果：

组件代码：

  
    
    
    
      
        
      
    
  



.fullImg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.norImg {
  position: relative;
  width: auto;
  height: auto;
}
.toBig {
  display: none;
}
.norImg:hover .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.fullImg .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}

使用组件：

宽高只给一种可以保持图片比例，都不给图片正常大小

第二种：

效果：

组件代码：

  
    
    
    
      
        
      
    
  
  
    
    
      
        
      
    
  



.fullImg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.norImg {
  position: relative;
  width: auto;
  height: auto;
}
.toBig {
  display: none;
}
.norImg:hover .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.fullImg .toBig {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.icon2:hover path {
  fill: #fff;
}

使用组件：

  
    
      
      
      
      
      
      
      
      
    
  



.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainBox {
  width: 1200px;
  height: 1200px;
  display: flex;
  border: 1px solid #000;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}