2023年6月21日发(作者：)
CSS3object-fit理解以及object-fit的兼容性，包括兼容IE9+浏览器本⽂还是着重讲下:cover，特别是关于object-fit:cover的兼容性问题，如何去兼容更多浏览器。具体的object-fit:cover⽤法请看《》下⾯简单讲述下object-fit的含义以及如何提⾼兼容性，⽐如兼容IE！object-fit理解CSS3 -size出现的⽐较早，⼤家应该知道其⽀持的⼀些值，除了数值之外，其还⽀持⼏个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover; }.none { object-fit: none; }.scale-down { object-fit: scale-down; }每个属性值的具体含义如下（⾃⼰理解的⽩话⽂，官⽅释义见官⽹）：fill: 中⽂释义“填充”。默认值。替换内容拉伸填满整个 box, 不保证保持原有的⽐例。contain: 中⽂释义“包含”。保持原有尺⼨⽐例。保证替换内容尺⼨⼀定可以在容器⾥⾯放得下。因此，此参数可能会在容器内留下空⽩。cover: 中⽂释义“覆盖”。保持原有尺⼨⽐例。保证替换内容尺⼨⼀定⼤于容器尺⼨，宽度和⾼度⾄少有⼀个和容器⼀致。因此，此参数可能会让替换内容（如）部分区域不可见。none: 中⽂释义“⽆”。保持原有尺⼨⽐例。同时保持替换内容原始尺⼨⼤⼩。scale-down: 中⽂释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺⼨⽐较⼩的那个。假设我们使⽤的原始图⽚是：容器的尺⼨是160*160, 背景⾊是灰蓝⾊，同时，测试的图⽚⾼宽设置为100%, 如下CSS代码：.box { width: 160px; height: 160px; background-color: #beceeb; }.box > img { width: 100%; height: 100%; }结果，各个属性值的表现如下截图：⼤家可以对照⽰意感受下，什么是内容拉伸(fill)，什么是内容全部都显⽰(contain)，什么是容器没有留⽩(cover)，什么是该多⼤就多⼤(none)。object-fit兼容性⾸先，看下object-fit⽬前兼容的浏览器，IE是完全不⽀持啊，怎么搞到object-fit去兼容⾄少IE9呢！对于IE全部不兼容，那么总有办法吧？ 下⾯介绍⼀个⽅法，使⽤CSS+JS的⽅法去兼容IE9+!下⾯看⼀个案例：（可以⽀持IE9+）Markup
2023年6月21日发(作者：)
CSS3object-fit理解以及object-fit的兼容性，包括兼容IE9+浏览器本⽂还是着重讲下:cover，特别是关于object-fit:cover的兼容性问题，如何去兼容更多浏览器。具体的object-fit:cover⽤法请看《》下⾯简单讲述下object-fit的含义以及如何提⾼兼容性，⽐如兼容IE！object-fit理解CSS3 -size出现的⽐较早，⼤家应该知道其⽀持的⼀些值，除了数值之外，其还⽀持⼏个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover; }.none { object-fit: none; }.scale-down { object-fit: scale-down; }每个属性值的具体含义如下（⾃⼰理解的⽩话⽂，官⽅释义见官⽹）：fill: 中⽂释义“填充”。默认值。替换内容拉伸填满整个 box, 不保证保持原有的⽐例。contain: 中⽂释义“包含”。保持原有尺⼨⽐例。保证替换内容尺⼨⼀定可以在容器⾥⾯放得下。因此，此参数可能会在容器内留下空⽩。cover: 中⽂释义“覆盖”。保持原有尺⼨⽐例。保证替换内容尺⼨⼀定⼤于容器尺⼨，宽度和⾼度⾄少有⼀个和容器⼀致。因此，此参数可能会让替换内容（如）部分区域不可见。none: 中⽂释义“⽆”。保持原有尺⼨⽐例。同时保持替换内容原始尺⼨⼤⼩。scale-down: 中⽂释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺⼨⽐较⼩的那个。假设我们使⽤的原始图⽚是：容器的尺⼨是160*160, 背景⾊是灰蓝⾊，同时，测试的图⽚⾼宽设置为100%, 如下CSS代码：.box { width: 160px; height: 160px; background-color: #beceeb; }.box > img { width: 100%; height: 100%; }结果，各个属性值的表现如下截图：⼤家可以对照⽰意感受下，什么是内容拉伸(fill)，什么是内容全部都显⽰(contain)，什么是容器没有留⽩(cover)，什么是该多⼤就多⼤(none)。object-fit兼容性⾸先，看下object-fit⽬前兼容的浏览器，IE是完全不⽀持啊，怎么搞到object-fit去兼容⾄少IE9呢！对于IE全部不兼容，那么总有办法吧？ 下⾯介绍⼀个⽅法，使⽤CSS+JS的⽅法去兼容IE9+!下⾯看⼀个案例：（可以⽀持IE9+）Markup
发布评论