IE 11 处理 object-fit: contain 问题

作者: Axiba | 来源:发表于2020-08-18 11:35 被阅读0次

IE 11 处理 object-fit: contain 问题
html img 适配模式
img 随 div 变化而变化,同比缩放
小发现
object-fit & IE
object-fit、object-position
前端Vedio设置宽高比
IE8下兼容background-size方法
关于img样式的小方法
css 图片等比缩放

<div class={imgWrap}>
           <img src={imgSrc} alt=''/>
</div>

  .imgWrap {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
img {
    object-fit: contain;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

IE 11 处理 object-fit: contain 问题
html img 适配模式
object-fit: contain;text-align: center;
img 随 div 变化而变化,同比缩放
使用 object-fit: contain;官方说明: https://developer.mozilla.o...
小发现
img 图片类似于background-image-size object-fit: contain;
object-fit & IE
object-fit理解 CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框 fill:将内...
object-fit、object-position
IE11及以下不支持该属性 object-fit 一般用于 img 和 video 标签，指定元素的内容应该如何去...
前端Vedio设置宽高比
给video包一层div 设置外层div与vedio的属性同时讲下object-fit的其他属性 contain...
IE8下兼容background-size方法
background-size: length|percentage|cover|contain;IE9+、Fir...
关于img样式的小方法
object-fit 取值 contain被替换的内容将被缩放，以在填充冤死的内容框时保持其宽高比。整个对象在填充...
css 图片等比缩放
CSS3 object-fit处理图片object-fit: fill; 填充元素的内容框，会拉伸o...