一、概述

现有一个图片预览功能，目前设置的宽高都是100%。但是这样有一个问题，如果图片的高度太高，图片展示不全。

二、解决

vue图片在设置好的div里面自动适应宽高，图片显示全部，不够宽高的留空白

本文使用的图片分辨率为：4000x2026

我的电脑分辨率为：1920x1080

默认宽高如果设置100%，电脑屏幕会显示不全的。

test.vue

<template><div><div class="rightullidiv"><img:src="pic"alt=""class="rightulliimg"></div></div>
</template>
<script>export default {data() {return {pic:"https://pic.3gbizhi.com/2021/0923/20210923090744481.jpg"}},mounted() {},methods: {}}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>.rightullidiv {width: 100%;/*background: #f2f2f2;*/display: flex;justify-content: center;align-items: center;.rightulliimg {max-width: 100%;max-height: 700px;}}
</style>

View Code

注意：这里设置了图片最高高度为700，如果高度太高，图片会显示不全。

访问页面，电脑屏幕就可以完整的显示图片了。

本文参考链接：https://www.geek-share.com/detail/2770531961.html

vue 图片宽高自适应相关推荐

vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动针对这个问题,有以下几种解决方案 ...
vue iframe 宽高自适应
获取窗口的宽高,然后将相应值赋值给iframe <template><div><iframe ref="iframe" id="bdIfra ...
css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）
效果图: 宽>高就限制宽即宽度100% ,高度自动.例如:19201088 高>宽就限制高即高度100%,宽度自动.例如:19442592 很多时候图片宽高比不固定,而且作为一个前端, ...
背景图片宽高自适应实现
.banner { width: 100%; background: url(/image/excellentCase/banner_pc.png?v=202106151044) no-repeat; ...
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的. image 标签有 src.mode 等属性基本够用但是今天在用的时候发现设置 src 之后,image 在小程序中 ...

vue 图片宽高自适应

一、概述

二、解决

vue 图片宽高自适应相关推荐

最新文章

热门文章