vue h5中获取图片宽高后 如何计算出对应px为多少

在Vue.js中，当你获取到HTML元素（如img标签）的图片宽高后，可以使用JavaScript的`clientWidth` 和 `clientHeight` 属性来获取实际显示在浏览器窗口内的尺寸。这两个属性会忽略CSS设置的宽度和高度，只返回图片的实际像素值。

例如，假设你已经通过`ref`或者其他方式获取到了一个img元素：

export default {
  data() {
    return {
      imgRef: null,
    };
  },
  mounted() {
    this.imgRef = this.$refs.myImage; // 假设myImage是你的图片元素名
    if (this.imgRef) {
      const width = this.imgRef.clientWidth;
      const height = this.imgRef.clientHeight;
      // 计算某个特定px大小对应的宽度或高度
      const pxToWidth = (px) => Math.round(px / width * 100);
      const pxToHeight = (px) => Math.round(px / height * 100);
      
      // 使用函数来转换为对应像素的百分比
      console.log('图片宽度对应500px:', pxToWidth(500));
      console.log('图片高度对应300px:', pxToHeight(300));
    }
  },
}

在这个例子中，你可以定义自定义函数`pxToWidth`和`pxToHeight`来方便地将给定的像素值转化为相对于图片原始宽高的比例。