图片的居中处理（包含 横图和竖图）

在进行图片的缩略图展示的时候，经常会有横图和竖图的区别

1. 效果一：

   
   
   image.png

// home.vue
// 加了七牛的参数  使得图片无论是竖图还是横图都显示为正方形的
<template>
  <div>
    <div class='bg-img' 
        :style="{backgroundImage:'url('+ url + smallPra +')'}">
    </div>
    <div class='img-box'>
        <img :src='url + smallPra' />
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            url:'http://......',
            smallPra:'-show4', //使用的七牛的参数 具体的配置可以参考七牛图片高级处理
        }
    }
}
</script>

<style lang='less' scoped>
.bg-img{
    width:180px;
    height:180px;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}
.img-box{
    width:180px;
    height:180px;
    img{
        width:100%;
    }
}
</style>

2. 效果二：

   如果使用img标签方法来展示图片

   • 当设置图片 width:100%, 横图满足需求，但是竖图会的高度会超出div标签的高度
     
     image.png
   • 当设置图片 height:100%, 竖图满足需求，但是很横图会的宽度会超出会超出div标签的宽度度
     
     image.png
   • 当设置图片 width:100%; height:100%, 图片会被拉伸变形
   image.png

   但是由于具体产品的需要，比如用户对图片的喜好时,需要直观的看出是横图还是竖图，上面的方法使用背景的方法同样是可行的

   
   
   image.png

// home.vue
<template>
  <div>
    <div class='bg-img' 
        :style="{backgroundImage:'url('+ url +')'}">
        <img class="select-btn" src="./images/shanchu.png">
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            url:'http://......',
        }
    }
}
</script>

<style lang='less' scoped>
.bg-img{
    position: relative;
    left: 0;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width:180px;
    height:180px;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}
.select-btn{
  position: absolute;
  top:-10px;
  right:-10px;
  width: 24px;
  height: 24px;
  user-select: none;
}
</style>

但是存在一些用户勾选 或者取消按钮的时候，由于是背景图片，无法确定按钮的位置，只能在div标签的右上角，会出现这样的情况，并不能满足需求

image.png

3. 效果三：

   最后看了不知哪个网站的瀑布流布局，得到了灵感来处理这样的情况，即使用图片的宽高的最大值来限制

   
   
   image.png

// home.vue
<template>
  <div>
    <div class='bg-img'>
        <div class='item' style="position:relative" >
            <img :src="url" class='img'>
            <img class="select-btn" src="./images/xuanzhong.png">
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            url:'http://......',
        }
    }
}
</script>

<style lang='less' scoped>
.bg-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width:180px;
    height:180px;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}
.item{
    position: relative;
    left: 0;
    top:0;
}
.img{
    max-width:180px; 
    max-height:180px;
}
.select-btn{
  position: absolute;
  top:-10px;
  right:-10px;
  width: 24px;
  height: 24px;
  user-select: none;
}

</style>