vue中，图片在div中按照图片原来大小等比例显示

菜鸡程序员_小小

于 2024-07-10 11:08:13 发布

阅读量317

点赞数 1

分类专栏： vue 学习，网站前端文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/qingdatiankong/article/details/140318484

版权

学习，网站同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

图片在div中按照图片原来大小等比例显示，可以保证web上显示的图片和实际图片形状一样，保留原始图片效果

实现代码如下：

<div style="padding: 0; width:400px;height:400px;position: absolute;border: 1px solid #eff2f6;">
   <img :src="imgOptions.img" style="width: 100%;height:100%;object-fit: contain;"/>
</div>

效果如下：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜鸡程序员_小小

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中，图片在div中按照图片原来大小等比例显示

图片在div中按照图片原来大小等比例显示
复制链接

扫一扫

专栏目录

html图片宽高成比例,纯css实现宽高度等比例变化的四种方法

weixin_34885009的博客

06-04

2276

网页前端布局中，我们经常需要元素宽度高度等比例协调变化，特别是响应式自适应网页，下面我们将分享4种解决方案。方法1：使用一个隐藏的图片这个方法不需要考虑任何兼容性，PC移动端完美运行。除了增加了一个dom结构，但是相对与一个页面成百上千的代码来说，不值一提我们知道，div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽...

vue2 在图片上打点自定义图标、大小、颜色，可拖动放大缩小

06-27

在Vue2项目中实现“在图片上打点并自定义图标、大小、颜色，可拖动放大缩小”这一功能，涉及到多个技术点，包括Vue组件开发、图像处理、CSS样式控制、事件监听以及可能的第三方库的集成。首先，你需要创建一个Vue...

参与评论您还未登录，请先登录后发表或查看评论

vue3在展示图片，固定容器大小，图片等比例拉伸，以及动态引入图片展示

weixin_52663662的博客

12-05

2678

在使用参数为url时，需要require()，才能识别出本地图片，注意：在使用require()的时候，必须提前声明使用引入图片的路径方式，就是必要写路径前缀require("@/...") 或者require("./...")，如果require(变量名字)会直接报错。在项目中展示图片的时候，需要指定的图片在固定好大小的容器里面展示，一般我使用和背景图片的这两种方法展示图片，总结：固定容器大小，图片等比例拉伸展示时，使用背景图片的展示的展示方式。

css设置背景图片等比例铺满整个页面

qq_45794878的博客

05-12

2884

background: url(“…/assets/img/login_bg.png”) no-repeat 设置背景图片地址 no-repeat背景图像将仅显示一次,在水平和垂直方向上不重复；background-attachment：fixed 当页面的其余部分滚动时，背景图像不会移动。背景图像的某些部分也许无法显示在背景定位区域中，图片多出的部分则会被截掉。

Vue3等比例缩放图片组件

最新发布

likeshopgood的博客

06-07

469

本文由ChatMoney团队出品，ChatMoney专注于AI应用落地与变现，我们提供全套、持续更新的AI源码系统与可执行的变现方案，致力于帮助更多人利用AI来变现，欢迎进入。有些情况我们需要在各种刁钻的情况下都要保持图片比例不变，比如用户缩放窗口等改变布局的情况。实现原理就是通过容器的宽度和内边距在保持你想要的比例。获取更多AI变现方案！

图片不变形的情况下铺满整个容器，另有兼容IE代码，等比例显示图片

橙-极纪元-cplvfx-JJY.Cheng

12-29

816

图片不变形的情况下铺满整个容器，另有兼容IE代码

前端实现图片放大缩小，图片初始化比例和容器等比宽

overdose__的博客

01-25

974

【代码】实现图片放大缩小，图片初始化比例和容器等比宽。

PC端 VUE 官网项目前端开发响应式布局（宽+高等比例缩放）

weixin_55846296的博客

08-01

6543

各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！

vue实现图片按比例缩放问题操作

10-14

在Vue框架中，实现图片按比例缩放是一个常见的需求，特别是在布局设计中，保持图片的原始比例至关重要，以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点： 1. **图片比例计算**：当需要...

Vue解析剪切板图片并实现发送功能

11-21

在Vue中实现“Vue解析剪切板图片并实现发送功能”涉及到多个技术点，包括监听剪切板事件、处理文件流、图片预览、图片压缩、上传至服务器以及WebSocket通信。下面将详细解释这些关键步骤。 1. **监听剪切板事件**：...

Vue-cropper 图片裁剪的基本原理及思路讲解

08-27

Vue-cropper 图片裁剪的基本原理及思路讲解 Vue-cropper 图片裁剪的基本原理及思路讲解是指通过 Vue-cropper 组件实现图片裁剪的基本原理及思路讲解。该组件提供了一个可视化的裁剪区域，用户可以通过拖动裁剪区域...

鼠标移动到图片上图片等比例放大效果

06-11

注意，`stop()`方法用于防止动画堆栈，确保图片在鼠标离开时平滑地恢复原大小。为了实现等比例放大，我们需要保持图片的宽高比。这通常涉及到CSS样式设置。例如，我们可以将图片的宽度设置为容器的100%，并禁用...

大小不一样的图片随着盒子大小自适应

lianwenxiu的博客

06-20

6089

前提：vue+iview做后台管理系统需求：页面一行有固定的4张卡片，每张卡片里有图片，图片是从后台系统中上传的，大小不固定，要卡片中的图片高度随着屏幕大小自适应小屏幕效果：大屏幕效果：解决方法有两种： 1. 利用@media媒体查询做。 ① 在index.html中加入meta标签 <meta name="viewport" content="width=dev...

vue全屏页面内容等比缩放

hello，word！

11-15

585

【代码】vue全屏页面内容等比缩放。

#vue# px如何转换rem，且可等比例缩放页面？

ZHENGCHUNJUN的博客

01-01

1015

步骤如下第一步：在项目根目录下中找到src文件夹，在src文件下中找到assets文件夹，在assets文件夹下新建一个js文件夹，在js文件新建一个rem.js 第二步：在rem.js中写入以下代码： (function (draftWidth, n) { function getRem() { var html = document.querySelector("html"); var w = document.body.clientWidth

vue实现用户上传图片后图片回显+点击预览显示大图

monicateacat的博客

05-05

2084

/ 更新预览图片 URL。前端页面代码,一个上传按钮,一个预览按钮,上传3个方法:上传前,上传限制,上传。如果是服务器绝对路径无需拼接了,直接url赋值进去ok。回显一个按钮:handlePreview方法.后端我是返回的图片的相对路径。

html 设置图片显示比例,css怎么实现图片在页面上以相同等比例显示缩放？（示例）...

weixin_30304423的博客

06-04

1980

在我们浏览页面时或者实际工作中，偶尔会遇到图片缩放的问题。那么本篇文章就给大家介绍关于css 图片等比例缩放即css图片等比例显示的问题。希望对有需要的朋友有所帮助。css图片等比例显示具体代码示例如下：css图片等比例显示代码示例.demo1-1 {float: left;width: 200px;height: 200px;overflow: hidden;}.zoomImage {width...

html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示

weixin_31748605的博客

06-04

1796

最简单的等比例：divimg{max-width:100%;max-height:100%;}如上显示效果是：图片等比例缩放，不变形；图片所有区域都会显示。但是，如上代码有可能会造成横向、纵向白边，当我们在做图片列表时，这会看起来有点乱，于是我们改进了下，保证横向没有白边，高度不足时上下留白，高度超出时隐藏图的上下：div{display:flex;align-items:cent...

vue中图片随窗口调整等比例放大缩小

06-06

在Vue中实现图片随窗口等比例缩放可以通过CSS样式来实现。可以给图片父容器设置相应的宽度和高度，并设置图片的宽度和高度为100%。这样图片就会随着父容器的大小而等比例缩放。例如，假设有一个父容器div，其中包含一张图片img，可以按照以下方式设置CSS样式： ```html <template> <div class="image-container"> <img src="xxx.jpg"> </div> </template> <style> .image-container { width: 100%; /* 设置父容器宽度 */ height: auto; /* 设置父容器高度自适应 */ text-align: center; /* 居中显示图片 */ } img { max-width: 100%; /* 设置图片最大宽度为父容器宽度 */ height: auto; /* 设置图片高度自适应 */ } </style> ``` 这样，当浏览器窗口大小改变时，图片就会自动等比例缩放以适应父容器的大小。