在进行图片的缩略图展示的时候，经常会有横图和竖图的区别
-
效果一：
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>
-
效果二：
如果使用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
-
效果三：
最后看了不知哪个网站的瀑布流布局，得到了灵感来处理这样的情况，即使用图片的宽高的最大值来限制
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>
