vue中获取图片url中的真实宽高

<script>

export default {

    data () {

        return {

            imgUrl: '>

获取display自适应的高度vue的方法是：

1、通过元素currenstyle获取。

2、通过元素offsetHeight的属性获取。第一种方法对浏览器有要求，第二种方法适用范围广。

有时候会使用100vh，刚进入页面时是合适的，但是若果页面高度是动态添加的，那么当页面实际高度超过100vh的时候，100vh的高度设置就不够了。

例如：

↑此时外部容器为100vh 刚好合适

↑但是我添加步骤 高度超过100vh 就不够了

解决办法：

在appvue中设置

#app{

height: 100%;

}

html,body{

height: 100%;

}

在你要适配的页面，将父容器的高度设为：

}

如果你的背景是一张，那么就这样：

#home {

width: 100%;

height: 100%;

overflow: scroll;

background-color: rgb(26, 28, 35);

background-image: url("/assets/bgpng");

background-size: 100%;

}

DIV部分

<chart

  ref="taskChart"

  :theme="chartstheme"

  autoresize :options="chartsoptionsu"

  @click="zydwclick"

  :style="{width:chartswidth,height:chartsheight}">

</chart>

<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"

        :src="YZKH_URL" :height="ifram_height"

        frameborder="0">

</iframe>

data部分

charts:{

//div的高度

ifram_height:0,

//echarts的高度宽度

width:'100%',

height:"230px",}

//自动设置chart的高度

methods: {

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  const chartHeight = (Number(deviceHeight) 082) /2//两个row

//计算echarts 的高度

  mechartsheight = chartHeight +'px';

//计算div部分的高度

  meifram_height = (Number(deviceHeight) 078) +'px'

},

在mountd里面调用

mounted() {

let me =this;

meRowResize();

//监视窗口发生变化再调用一次

windowonresize =function () {

meRowResize();

}

获取DOM的高度宽度公式

DOM可视高度/DOM最长的高度=计算比例

计算  table高度 

<Table border

      @on-sort-change="onSortChange"

      :columns="tableAtableColumns"

      :data="tableAtableData"

      :height="height"

      ref="currentRowTable"

      :percent="percent"

      style="white-space: nowrap;word-break: keep-all"

></Table>

data() {

return {

height:100,

//自动设置列表的高度

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  if (me$refscurrentRowTable) {

meheight = Number(deviceHeight) 065

  }

},

let me =this

meRowResize();

//监听窗口大小变化

windowonresize =function () {

meRowResize();

}

以上就是关于vue中获取图片url中的真实宽高全部的内容，包括:vue中获取图片url中的真实宽高、vue 通过 refs 设置高度自适应 求帮助、怎么获取display自适应的高度vue等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！