根据图片自身大小自适应显示_vue2设置图片宽度为图片本身的宽度-CSDN博客

本文链接：https://blog.csdn.net/Angely_cc/article/details/121846430

本文介绍了如何使用 Vue.js 中的 imgHook.js 文件实现图片的1:1比例自适应，并创建ref来处理多个图片。通过getSize函数，根据屏幕大小动态计算图片宽度和高度，同时在窗口大小改变时进行实时更新。

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

创建imghook.js:

//首先图片是1:1比例，解决不同图片免去单独设置宽高
// 在函数里创建ref，可以避免多张图片使用造成取值的问题
import { ref } from "vue"
// 使用解构视图是不会重新渲染的
const getSize = (naturalWidth, naturalHeight,imgWidth,imgHeight,imgStyle) => {
  const clientWidth = document.documentElement.clientWidth
  const fontSize = clientWidth / 750
  imgWidth.value = naturalWidth * fontSize + "px"
  imgHeight.value = naturalHeight * fontSize + "px"
  imgStyle.value = { width: imgWidth.value, height: imgHeight.value }
}
export const imgHook = (e) => {
  let imgStyle = ref({})
  const imgWidth = ref("")
  const imgHeight = ref("")
  const { naturalWidth, naturalHeight } = e	// 可以直接从dom对象拿这两个属性
  getSize(naturalWidth, naturalHeight,imgWidth,imgHeight,imgStyle)
  imgStyle.value = { width: imgWidth.value, height: imgHeight.value }
  // 监听屏幕变化事件重新加载 可不用，浏览器测试时候频繁切换屏幕就加了。。。。。。
  window.addEventListener("resize", () => {
    getSize(naturalWidth, naturalHeight,imgWidth,imgHeight,imgStyle)
  })
  return imgStyle
}

index.html:

 <img ref="prizeImgRef" class="img" :style="imgStyle.value" @load="imgLoad($event)" src="../assets/k2.png" alt="" srcset="">

import {imgHook} from '@/hooks/imgHook.js'  // 使用hook值得时候不要.value。会丢失响应式

let imgStyle = ref({})
let prizeImgRef = ref(null)
const imgLoad =(e)=> {
// dom对象传过去				
  imgStyle.value=imgHook(prizeImgRef.value)
}