vue 实现根据窗口大小自适应图片预览

已于 2022-06-06 16:09:21 修改
阅读量1.8k 收藏 6
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-06-02 22:36:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50290666/article/details/125104245
版权
本文介绍了如何在 Vue.js 应用中实现根据窗口大小自适应的图片预览功能。主要步骤包括设置数据字段记录视窗大小和图片信息，监听窗口变化更新尺寸，获取图片原始宽高，并通过计算属性计算预览时的图片宽高，确保图片在预览时能在窗口内适应显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

  <!-- 查看大图 -->
  <div class="viewPic-container" v-show="picSrc">
    <!-- 遮罩层 -->
    <div class="modal" @click="endViewPic"></div>
    <img class="viewPic-img" :src="picSrc" :style="{width, height} = picSize">
  </div>

.viewPic-container {
   
  display:flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:100;
}
.modal {
   
  position:absolute;
最低0.47元/天 解锁文章
vue页面导出Word文档（含图片）
日常笔记/总结/系列知识梳理
08-26 1万+
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他庞大的框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。另一方面，当与现代化的工具和库结合使用时，Vue 也完全能够构建复杂单页应用。组件系统：Vue.js 使用组件系统来构建应用。组件是可复用的 Vue 实例，具有自己的作用域，可以包含模板、数据、样式等。响应式数据绑定：Vue 会自动跟踪依赖关系并在数据变化时更新视图。
vue图片宽高自适应_移动web图片高度自适应的解决方案
weixin_42510225的博客
01-12 892
由于图片的加载是在dom加载完成之后进行的，于是，在手机端浏览网页时，经常会看到页面刚打开时很多内容叠在一起，当图片加载完成后，页面会由于图片加载完成出现明显的抖动针对这个问题，有以下几种解决方案媒体查询+pxremvmpadding媒体查询+px@media screen and(max - width: 320 px) {img {height: 50px;}}移动端设备种类繁多，媒体查询固然...
一个移动端专用的Vue2图片预览插件
08-12
An image viewer base on Vue.js for mobile / 一个移动端专用的 Vue2 图片预览插件
vue--如何根据可视窗口的大小自动调节图片大小
weixin_42520375的博客
12-02 2551
首先需要用到两个东西，1：onresize事件，当浏览器发生变化时触发事件 2：clientWidth方法，获取你现在元素下的窗口宽度，然后对你获取到的宽度进行你所需要的比例的运算即可 mounted () { this.screenWidth = document.body.clientWidth; this.height = (document.body.clientWid...
vue之设置背景图片自适应屏幕
热门推荐
weixin_43984150的博客
05-23 1万+
需求说明 图片覆盖整个浏览器窗口 图片处于整个页面最底层 根据浏览器窗口的变化改变图片大小 不能使图片变形 图片始终在浏览器窗口的中心位置 适应web端和移动端 实现方法 参考许多文章后，发现最实用的布局是edge浏览器的新标签页的背景图片布局。 通过整合多方方案，得出最佳方案。 不论是使用图片标签引入图片还是块级标签添加背景图片，都可以通过此方法实现自适应。 //模板标签 <template> //外层盒子需要动态绑定宽高属性 <div class="register" :sty
vue3 echarts 图随窗口大小的改变而改变 自适应问题
weixin_67619405的博客
02-25 754
vue3 echarts 图随窗口大小的改变而改变 自适应问题
vue 图片自适应屏幕大小
最新发布
weixin_56806542的博客
08-06 476
父组件打开图片可以引入下面组件。
Element-ui配合Vue实现走马灯图片自适应效果
weixin_45531741的博客
11-09 7228
elementUI走马灯实现图片自适应（等比缩放，使得图片缩小不挤压，放大不拉伸变形） 解决方法的原理：监听屏幕视口大小如果’resize’,发生改变了，就获取图片的高度height，然后渲染到页面 ElementUI 地址： https://element.eleme.io/#/zh-CN/component/carousel 方法解析： 1.窗口第一次打开的时候加载执行 imgLoad()方法，第一次加载时获取图片在窗口中的高度，然后渲染到页面中去。 2.接着通过addEventListenner（）
vue+element UI改进轮播图自适应浏览器窗口大小
wmklalala的博客
04-03 2436
element UI自带的el-carousel高度是固定的，当图片高度过小或者浏览器窗口大小变化时，会出现空隙。我参考的方法来自https://blog.csdn.net/juneoer/article/details/84205231?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc...
Vue实现图片瀑布流
qq_46083602的博客
02-26 637
Vue实现图片瀑布流，响应式，可用于壁纸图片的展示。
Vue3、TypeScript 实现图片数量及大小随宽度自适应调整
kykx_的博客
02-19 2450
前言 过了这么久，想起自己还有个博客，更点内容吧！ 来，上需求！ 最近在做个前端界面，要求在一行中展示一些图片，展示的图片数量随着窗口宽度大小进行变化，除此之外还有以下要求： 图片要均匀分布； 所有图片要完整的填充一整行； 图片的大小随着窗口宽度变化自适应调整。 不说了，不说了，上个最终实现效果图。 实现 基本思路 最开始是打算主要依靠 CSS 的布局来实现，几乎把自己了解的布局方式都想了一遍了，最后默默的给自己找了个借口：刚开始学，不要为难自己！不要为难自己！ 最终思路： 每张图片设定一个最小宽
Vue中根据窗口调整样式
SonHOuse1993的博客
11-18 1089
Vue中根据窗口调整样式在加载时根据窗口大小调整样式，并在改变窗口大小时实时调整样式注意事项 在加载时根据窗口大小调整样式，并在改变窗口大小时实时调整样式 <template> <div id='mydiv'> lalala </div> </template> <script> export default { data() { return { screenWidth: 0, }; }, met
背景图片居中全屏自适应显示
lyf的博客
11-29 7127
.bg{ background-size: cover; background-image:url(../assets/images/sunshine.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; }
vue项目移动端点击图片放大预览（可拖拽，放大）
notagoodwriter的博客
12-29 2541
在图片加载完成后调用。
Vue 移动端 previewer实现图片放大预览
beichen3997的博客
05-08 5068
本文主要讲述，vue在手机移动端如何实现对小图进行放大查看预览。类似于朋友圈的照片查看。 可用工具 1、npm安装，npm i vue-preview -S 2、使用一些Vue的UI组件框架自带的，如vux、vonic、Mint UI等 自带的preview 效果图 因为图片太jb大了，放在文章中，排版太丑，点击链接，跳转看看吧。 小图模式：(https://img-blog.csdn.net...
vue移动端实现图片预览
weixin_45956838的博客
12-28 3744
接着上文的文件上传、下载、删除继续往下说，我们先说移动端的图片格式预览 上文说到了vue引用了vant插件，是一个很好用的移动端开发组件，它自带了上传文件的方法，当然也带了图片预览的方法 图片预览其实跟文件下载有点类似，上文我们说到文件下载请求后台接口，拿到了文件的’blob’,然后通过window.URL.createObjectURL(blob)创建一个文件下载的路径，创建a标签进行下载；图片预览也是拿到文件的’blob’，然后创建一个FileReader对象，使用readAsDataURL()方法来
vue 图片全屏展示
leng0920的博客
12-01 1924
<template> <div id="hItem1" :style="{ height: screenHeight + 'px'}"> <div class="mainK"> <img :style="{ height: screenHeight + 'px'}" src="@/images/home/item1/banner.png" alt=""> </div> </d.
vue移动端图片预览组件
qq_39258914的博客
10-19 7634
更新说明：1.02版本采用show属性值控制组件的显示与隐藏，不再使用v-if！！ 安装：npm install -s w-previewimg 或 yarn addw-previewimg 在线预览地址：https://wenyuming.github.io/w-demos/dist/index.html#/previewimgDemo 预览时请按f12，在移动端模式下预览 由于预览...
<img>会随着窗口大小缩放
westdu的博客
12-19 7162
会随着窗口大小缩放，如果改变img大小，设置了width: 30%，当缩放窗口时，图片大小也随着缩放。 想固定大小的方式：设置成固定宽度，如width: 100px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值