css - object-fit ie兼容
css - object-fit ie兼容
参考资料
github
解决object-fit兼容IE浏览器实现图片自适应
demo
<!--
* @createDate: 2022-08-30 14:14:25
* @Author: zclee
* @LastEditTime: 2022-08-30 14:36:34
* @LastEditors: zclee
* @FilePath: \lee-vue-githubio\src\views\ie\imgObjectFit.vue
* @Description:
-->
<template>
<div class="app-container">
<div class="img_box">
<img ref="img" class="img_contain" :src="src" />
</div>
<div class="img_box">
<img ref="img1" class="img_contain" :src="src1" />
</div>
<br />
<div class="img_box">
<img class="img_contain" :src="src" />
</div>
<div class="img_box">
<img class="img_contain" :src="src1" />
</div>
</div>
</template>
<script>
import objectFitImages from 'object-fit-images'
export default {
data() {
return {
src:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Fsj02%2F210120210622FD-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664422275&t=e2329e1b033c77d5d05a6ff76cd0af72',
src1:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2017%2F1100%2F16sucai_P59201F390.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664421432&t=a3908bcb14297cadea43c51fa01575ef'
}
},
mounted() {
objectFitImages(this.$refs.img)
objectFitImages(this.$refs.img1)
}
}
</script>
<style lang="scss" scoped>
.app-container {
.img_box {
display: inline-block;
height: 250px;
width: 250px;
.img_contain {
height: 100%;
width: 100%;
object-fit: contain;
font-family: 'object-fit: contain;';
}
}
}
</style>
Lee2