通过 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="data: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 */

 -->

css : object-fit 兼容 ie 的解决方案的更多相关文章

  1. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  2. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  3. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  4. css gray，grayscale，css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  5. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  6. oracle 在C# 中调用oracle的数据库时，出现引用库和当前客户端不兼容的问题解决方案

    oracle 在C# 中调用oracle的数据库时,出现引用库和当前客户端不兼容的问题解决方案 解决方案 1.直接引用  Oracle.ManagedDataAccess.Client.dll动态库即 ...

  7. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  8. webstorm 添加css前缀（兼容）自动添加

    Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...

  9. css - object-fit ie兼容

    css - object-fit ie兼容 参考资料 github 解决object-fit兼容IE浏览器实现图片自适应 demo <!-- * @createDate: 2022-08-30 ...

  10. 解决CSS各种IE各种兼容问题(Google解决方案)

    google的 ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准 ...

随机推荐

  1. 【UniApp】-uni-app-打包成小程序

    前言 大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为网页. 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包为小程序. 正文 打开微信小程序呢,其实 ...

  2. IDEA美化教程

    一.IDEA 字体大小怎么设置(图文教程) IDEA 初次安装时,默认字体非常小,这种情况下,代码阅读起来非常费劲,对保护视力非常不友好.那么,要如何在 IDEA 中设置字体大小呢? 这里介绍两种方法 ...

  3. 七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入（1）

    前言 由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早.中.晚来进行阶段性学习,从而提高学习效率. 七天.NET 8 操作 SQL ...

  4. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 04.角色感知组件PawnSensingComponent和更平滑的转身

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本文章对应课程第十一章 43.44节.本文讲述PawnSensingComponent中的视觉感知的使用,以及对 ...

  5. Deployment控制器

    目录 Deployment控制器 1.deployment及副本数 使用命令生产yaml文件模板 控制器通过什么管理pod? 2.副本数修改方法 3.动态扩展HPA 4.镜像滚动升级及回滚 升级 回退 ...

  6. 国内AI大模型 VS chatgpt （20）-- H265/H264有何不同，h265有什么优势?

    H265/H264有何不同,h265有什么优势? 文心一言: H.264和H.265是两种不同的视频编码标准,它们在压缩质量和带宽需求方面有所不同. H.264是一种高效的视频压缩标准,它的编码单位是 ...

  7. 22、Scaffold属性 抽屉菜单Drawer

    在Scaffold组件里面传入drawer参数可以定义左侧边栏,传入endDrawer可以定义右侧边栏.侧边栏默 认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. class ...

  8. 兼容并蓄广纳百川，Go lang1.18入门精炼教程，由白丁入鸿儒，go lang复合容器类型的声明和使用EP04

    书接上回,容器数据类型是指一种数据结构.或者抽象数据类型,其实例为其他类的对象. 或者说得更具体一点,它是以一种遵循特定访问规则的方法来存储对象. 容器的大小取决于其包含的基础数据对象(或数据元素)的 ...

  9. Java 打印Excel工作表

    示例要点 本文介绍如何通过Java程序打印Excel工作表.可通过以下方法打印: 默认打印机打印 指定打印机打印 程序环境 spire.xls.jar JDK版本要求1.6.0及以上的高版本 IDEA ...

  10. 物联网SIM卡和SIM卡真的不是一回事

    办卡吗,兄弟? 物联网卡?相信大家第一反应都是一愣.大家听过银行卡.电话SIM卡.会员卡-等等,很多人可能都是第一次听说物联网卡.那它到底是个什么东东?它能干什么呢?今天就带大家一探究竟. 那在物联网 ...