15

我想使用object-fitCSS 规则。
MSIE 和 MS Edge 浏览器不支持此功能。
虽然有一些适用于 IE 的 polyfill，但据我所知，没有一个适用于 Edge。

例如，Jonathan Neal 的 polyfill fitie可以在 IE 中使用，但不能在 Edge 中使用（至少不在我的机器上）。这是因为 fitie 使用了 MS only JS 对象element.currentStyle，element.runtimeStyle这些对象不再在 Edge 浏览器中得到任何支持。但如果我使用window.getComputedStyle(element).getPropertyValue('object-fit')，Edge 什么也不返回。

那么如何object-fit在 MS Edge 浏览器中用 JavaScript 获取 CSS rule rule 的值呢？

img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
  width: 400px;
  height: 320px;
  overflow: hidden;
}
#i {
  display: block;
  width: 100%;
  height: 100%;
  -ms-object-fit: cover;
  object-fit: cover;
}

div {
  box-sizing: border-box;
  border: 1px solid gold;
}
div,
p {
  font-family: sans-serif;
  font-size: 20px;
  width: 400px;
  margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

编辑

它必须以某种方式成为可能，因为它没有被完全忽略。
开发者工具显示规则带下划线
卷曲下划线

奖金问题：

是否有任何适用于 Edge 的对象拟合 polyfill？

4

2 回答 2

6

您应该可以直接引用它：

// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',  
    window.getComputedStyle(document.querySelector('.test')).objectFit);

// 'rgb(255,0,0)' in both
console.log('color', 
    window.getComputedStyle(document.querySelector('.test')).color);
.test{ color: red; }
<div class="test">test</div>

即使使用 polyfill，该样式属性也会出现undefined在不支持它的浏览器中（例如 Edge）。

问题在于，就 Edge 而言：没有 object-fit规则。当 Edge 解析 CSS 时，它无法识别规则并跳过它。如果您使用其他属性或 JS 填充行为，这不会改变 Edge 只是不知道它的事实。

因此，专门回答“那么如何在 MS Edge 浏览器中使用 JavaScript 获取 CSS 规则对象匹配规则的值？” 你可以做得到window.getComputedStyle(ele).objectFit这个值，它总是undefined（即使成功填充）。

对于奖励问题： Edge 支持，background-size: cover 因此您应该能够将图像设置为display:inline-block元素的 CSS 背景并获得所需的行为。你可以很容易地换掉<img>一个风格...<div>

var img = document.querySelector('.i');

// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {

  // Create a div
  var div = document.createElement('div');
  div.className = img.className;

  // Set the background image to be the source
  div.style.backgroundImage = 'url(' + img.src + ')';

  // Set background-size to the object-fit we want
  div.style.backgroundSize = 'cover';

  // Swap them
  img.parentNode.replaceChild(div, img);
}
.test {
  width: 400px;
  height: 320px;
  overflow: hidden;
  border: 1px solid red;
}

.i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="test">
  <img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>

这只是基本的想法——像object-fit-images这样的垫片将这个想法更进一步，并支持额外的属性，如object-position.

或者（以及更多的 HTML），您可以保留<img>标签并将其包装在一个容器中，该容器的行为就像它object-fit相对于它应用一样。这就是object-fit-polyfill所做的。

两个垫片都应该在 Edge 中工作。

于 2017-07-25T11:03:50.963 回答
5

我想使用适合对象的 CSS 规则。

您无需在 MS Edge 浏览器中使用 JavaScript获取 CSS 规则规则的值object-fit即可img 覆盖其父级。

奖励：无需使用 polyfill，并且适用于所有浏览器（低至 IE9）

旁注，MS Edge 版本。16个支撑object-fit

这是一个完全一样的解决方案，object-fit: cover使用transform: translate和min-width/height。

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
<div>
  <img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

如果你愿意，你可以使用CSS @supports来重置上述属性并添加object-fit.

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@supports (object-fit: cover) {
  #i {
    min-width: auto;
    min-height: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
<div>
  <img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

当一个人因为想要在标记中设置图像源而需要使用 animg时，另一个被忽视的选项是对源使用内联样式background-image。

鉴于事实，在这种情况下，div具有固定宽度/高度的 a 设置图像的边界，这里是一个简单的示例。

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>

更新

你当然也可以object-fit: contain模仿

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  max-width: 100%;                    /*  changed to max  */
  max-height: 100%;                   /*  changed to max  */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
<div>
  <img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

根据评论更新

当涉及到模仿事物时object-fit，video事情变得更加复杂。

元素的video响应方式与图像不同。

这是 4 个不同的示例，显示某些视频在模仿时有效cover，而有些在模仿时有效contain

要获得与图像一致且相同的良好效果，需要运行一个小脚本来获取视频纵横比，然后根据其及其容器纵横比将其宽度或高度设置为 100%。

这是 SO 上的另一篇文章，在 <video> 或 <img> 上模拟 background-size:cover，它展示了更多的方法来解决这个问题。

我发现的另一种选择是使用媒体查询及其max/min-aspect-ratio

小提琴演示

来源：https ://fvsch.com/code/video-background/

于 2017-07-25T14:30:04.913 回答