这两天在试用Edge游览器,偶然发现使用Edge游览Blog的时候bg-img并不能正确的缩放,检查发现是因为Edge并不支持CSS的object-fit属性.跟Chrome的对比,非常明显.

从GitHub上搜索发现有一个JS库object-fit-images,只需添加三行代码即可转换object-fint属性,在Edge中正确显示.

Install

  • Git
$git clone https://github.com/bfred-it/object-fit-images.git
  • NPM
$npm install --save object-fit-images

在模板的<head>中引入:

<script src="dist/ofi.min.js"></script>  

Usage

在模板的<body>中启用:

<script>objectFitImages();</script>  

在模板的CSS文件的object-fit下添加一行:

object-fit: cover;  
object-position: center;  
font-family: 'object-fit: cover; object-position: center;'  

之后的效果: