本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
通过 github 搜索 object-fit ie , 借鉴大佬兼容 ie 的经验。
下载解压到文件夹 ， 打开测试目录 ， 查看 demo
使用 ie 打开demo ， 查看显示效果 ：
代码 ：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../dist/polyfill.object-fit.css">
<style>
img {
width: 100%;
height: 35em;
margin: 10px 0;
border: 5px solid red;
object-fit: cover;
overflow: hidden;
}
</style>
</head>
<body>
<h1><code>object-fit: cover;</code></h1>
<img src="image.jpg">
<script src="../dist/polyfill.object-fit.js"></script>
<script>
// Call polyfill to fit in images
document.addEventListener('DOMContentLoaded', function () {
objectFit.polyfill({
selector: 'img',
fittype: 'cover'
});
});
</script>
</body>
</html>
通过 demo 可以发现 需要引入的文件 ：polyfill.object-fit.css 和 dist/polyfill.object-fit.js 。
还需要 底部初始化 ， 在 fittype 后 输入 object-fit 的类型。 即可实现对 ie 的兼容
以下是我个人的实践 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./polyfill.object-fit.min.css">
<title>响应式图片</title>
<style>
body{
margin: 0;
}
img{
height: 100vh;
width: 100%;
display: block;
object-fit: cover;
}
</style>
</head>
<body>
<picture>
<!-- 横屏 320px-->
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="./img/lx.png">
<!-- 竖屏 320px-->
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="./img/lx2.png">
<!-- 横屏 640px -->
<source media="(min-width: 640px) and (orientation: landscape)" srcset="./img/lx.png">
<!-- 竖屏 640px-->
<source media="(min-width: 640px) and (orientation: portrait)" srcset="./img/lx.png">
<!-- 默认 -->
<img src="./img/lx.png" alt="this is a picture">
</picture>
<script src="./polyfill.object-fit.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
objectFit.polyfill({
selector: 'img',
fittype: 'cover'
});
});
</script>
</body>
</html>
<!-- 解决图片下的白边
/* 第一种 display: block; */
/* 第二种 */
vertical-align:bottom;
/* 第三种 img的父级容器，添加属性overflow:hidden */
-->
