vant组件设置预览图片拉伸占满手机的整个屏幕（css3的object-fit属性）

最新推荐文章于 2024-06-28 10:26:03 发布
最新推荐文章于 2024-06-28 10:26:03 发布
阅读量2.5k 收藏
点赞数 1
分类专栏： WEB前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45803033/article/details/105404569
版权

刚开始写的时候以为组件里面肯定有修改图片的样式的，发现这个是一个方法ImagePreview方法，想着使用className就可以设置，但是发现不起作用，设置权重也不起作用，就剩下审查元素修改样式了，一下是样式的代码：

代码

一定要设置在全局

.van-image__img {
    object-fit: fill !important;
  }

效果展示

在这里插入图片描述

迷路时你就往前走i
关注
专栏目录
vant-swipe自适应图片高度+图片预览
GTbond的博客
07-28 3721
vant-swipe自适应图片高度+图片预览
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vant4实现图片放大预览
monkey7
03-22 1536
vant4使用showImagePreview 实现图片点击全屏预览
vant 图片放大预览（vue3）
最新发布
m0_58002043的博客
06-28 855
vant通过遮罩层实现图片放大预览功能。
vant3之van-uploader 图片回显、放大预览无效问题的解决办法
qq_27936291的博客
07-05 6016
vant3之van-uploader 图片回显问题的解决办法
element-plus的el-image预览图片无法全屏
黄彪博客
06-18 1163
在开发中，使用 el-image 控件 查看图片详情，即放大图片，按照官方文档使用，结果发现图片详情无法全屏展示，如图。原因：el-carousel 滑动的效果就是利用了 CSS3 的。结论：查看图片详情是因为 CSS居中用的。备注： 代码和上面一样，只是将。图片无法在浏览器居中展示。
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...
vue +vant 适合手机端上传图片图片 实现了上传、压缩、旋转图片
01-20
这在移动应用中尤其重要，因为用户通常使用手机摄像头拍摄图片，而这些图片可能由于设备方向或相机设置导致旋转问题。 首先，我们需要解决照片旋转的问题。当用户使用手机正面摄像头拍照时，照片可能会根据相机的...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
轻量，可靠的小程序UI组件库 介绍 Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并...
imageView 解决图片不能全屏
05-31 464
在写一个imageview的时候，发现图片无法全屏，而且怎么设置contentmode都没用，很郁闷，后来搜索了一下，又查了一下api，终于解决问题，解决问题的关键是要获取父view的frame作为imageview的frame，这样再设置图片久可以全屏了
vue移动端开发 vant框架使用 ImagePreview 之 图片预览 放大
weixin_40320187的博客
11-15 5939
1.HTML部分 <div class="block" @click="open(index)"> <div class="img" v-if="bottomData.length>0"> <img ...
vue | vant swipe轮播图片宽高会被拉伸或显示不全的问题
Igiveufireworks的博客
06-26 2096
object-fit: contain 保持图片原有尺寸比例。显示不全时： 没有设置css代码。
vant4 ImagePreview 图片预览，图片放大后不能拖动
hexin76的博客
11-16 959
teleport: '.preview-img'//挂载在html中任意节点改变（最好另新增节点）vant4弹出层还有很多样式问题，欢迎讨论，可能是我菜了用法不对所以出些奇怪bug。主要原因事与弹出层混合使用导致图片预览出现宽度丢失。样式中调整谨慎使用穿透。
vue 使用vant中的图片预览功能
热门推荐
夏夏
12-09 1万+
ImagePreview 图片预览 介绍 图片放大预览，支持函数调用和组件调用两种方式。 函数调用 ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。 import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 组件调用 通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。 import Vue from
vue3 + vant ImagePreview移动端图片预览效果
erduoduo520的专栏
07-26 1758
移动端图片预览效果
vue结合vant写图片预览功能
追风筝的博客
11-03 960
App图片预览需求(前提配置好了vant) 如果还没有配置的话，配置步骤如下 官网链接：https://youzan.github.io/vant/#/zh-CN/grid 步骤1：下载依赖 npm i vant --save // 如果有淘宝镜像的话也可以使用（下载的速度会快些 --save，可以在package.json查看） cnpm i vant --save 步骤2：在全局main.js中配置 // 引入 vant import Vant from 'vant'; import 'vant
vant 图片预览使用方法
qq_57325395的博客
08-22 785
步骤一: 引入 vant 组件。在main 里面注册 为全局。在使用的 文件里面引入。
Vue+Vant ui实现图片预览 ---------------升级版
m0_61950846的博客
04-14 1254
1、在所需要使用的组件里面引用 import { ImagePreview } from 'vant'; 2、具体使用详解 // 通过函数传参的方式把图片数组和位置索引放入到 ImagePreview 配置对象里面 <div v-for="(item,index) in device.imgs" :key="index"> <img :src="item" @click="sceneImg(device.imgs,index)"/> </div> 3.j
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值