admin管理员组

文章数量:1566366

最近用vue做了一个项目，最近做下来总结了点关于图片适应的东西给大家分享下，第一次写博客，写不好请尽量。

一、元素的宽度可以用百分比设置，这样不同分辨率的电脑下元素的宽度都能自适应，但高度就不同了，尤其是对于图片来说，如果宽高比例不随着一起比例放大或者缩小就会导致变形，然后我刚开始想的方法是通过监听window的变化，用vue的ref去获取包含img的div，然后动态设置div的高度是window的多少计算出来，但vue是单页面开发，组件跳转后监听事件还在，但跳转到另一个组件不能通过ref获取对应的那个div，效果不影响但控制台会一直显示红色报错，然后后面百度找到了 element-resize-detector这个插件，它可以通过监听元素的变化，下面是使用步骤。

cnpm install element-resize-detector
import elementResizeDetectorMaker from ‘element-resize-detector’

mounted () {
this.erd = elementResizeDetectorMaker()
this.erd.listenTo(this.$refs.div, () => {
this.imgLoad()
})
}

不过只要元素发生变化就会触发事件，也不影响性能，不过也可以通过防抖节流让它不一直触发

用这个插件可以让元素的宽高适应于任何分辨率的电脑。要么就用媒体查询分别设置不同电脑分辨率下元素的高度

本文标签： 自适应浏览器图片objectfit

版权声明：本文标题：图片的自适应以及object-fit兼容IE浏览器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726426222a1070406.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。