<template>
<div id="imt">
<div class="img-item">
<img src="../images/1.jpg">
</div>
<div class="img-item">
<img src="../images/2.jpg">
</div>
<div class="img-item">
<img src="../images/3.jpg">
</div>
<div class="img-item">
<img src="../images/4.jpg">
</div>
<div class="img-item">
<img src="../images/5.jpg">
</div>
<div class="img-item">
<img src="../images/6.jpg">
</div>
</div>
</template>
<script>
export default {
name: "Waterfall"
}
</script>
<style scoped>
#imt{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
/*处理最后一行的图片*/
#imt::after{
content: '';
flex-grow: 9;
}
.img-item{
height: 200px;
margin: 5px;
border: 1px solid red;
flex-grow: 1;
}
.img-item img{
height: 100%;
min-width: 100%;
/*object-fit: cover; 等比例显示图片*/
}
</style>
09-27
5109
09-22
1037