vue 大量图片展示_vue中多图展示,随着图片数量增多高度自适应,css设置无效...

已通过设置height: auto !important;或定义最小高min-height: 80px;图片展示还是无法自适应高度,会遮挡下面div的文字

父组件:

.proofImg{

width: 370px;

height: 150px;

/*height: auto;*/

display: inline-block;

flex-wrap: wrap;

}

.describeFont{

margin-left: 2.2px;

}

子组件:imgViewer.vue

显示已上传图片:

:key="index"

:src="fileImgFun(item)"

alt=""

@click="clickHandler"

:preview-src-list="fileImges"

class="showElImg"

>

.manyImgShow {

height: 80px;

height: auto !important;

}

.showElImg{

/*display: inline-block;*/

width: 50px;

height: 50px;

padding-right: 10px;

}

求教如何使整个外部的height自适应,不遮挡底部文字?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自适应瀑布流布局是指在网页中展示大量图片和div容器,并且根据容器的宽高度自动调整布局。在Vue3中实现这样的布局,可以使用以下步骤: 首先,安装Vue3并创建Vue实例。 ```javascript npm install vue@next ``` 在Vue中创建动态组件,并为每个组件设置一个宽高。 ```html <template> <div> <component v-for="(item, index) in items" :key="index" :is="item.type" :style="{ width: item.width + 'px', height: item.height + 'px' }"></component> </div> </template> <script> import ImageComponent from './components/ImageComponent.vue' import DivComponent from './components/DivComponent.vue' export default { data() { return { items: [ { type: 'image', width: 200, height: 300, }, { type: 'div', width: 250, height: 150, }, // 添加更多的图片和div容器 ], } }, components: { ImageComponent, DivComponent, }, } </script> ``` 在组件中,可以使用CSS的flex布局来实现自适应瀑布流布局。 ```html <template> <div class="container"> <!-- 图片组件的模板 --> </div> </template> <style scoped> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } </style> ``` 通过以上步骤,我们可以实现一个简单的自适应瀑布流布局。当有新的图片或div容器加入时,布局会自动调整以适应屏幕宽度和高度。不同宽度和高度的元素会按照一定的规则排列,形成一个美观的瀑布流效果。 以上是一个简单的示例,实际情况下,你可以根据具体的需求进行更多的定制和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值