主要就是将height设置为0,并且使用width: 100%;padding-bottom: 100%;撑开div,图片内容使用背景图片即可
<style type="text/css">
.waterfall-box-li-img {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 8px;
overflow: hidden;
}
</style>
<div class="waterfall-box-li-img" :style="`background-image:url(${img_url})`" style="background-repeat: round;">
</div>
<script type="text/javascript">
var vm = new Vue({
data: { //数据
img_url:'图片路径',
},
})
</script>