blocks|key|102627|text|您应该能够直接引用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|102628|​|102629|//+'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);|code-block|syntax|javascript|102630|.test{+color:+red;+}|102631|<div+class="test">test</div>|102632|102633|该样式属性在不支持它的浏览器(如Edge)中将是undefined，即使使用polyfill也是如此。|offset|length|style|CODE|102634|问题是，就边缘而言:没有object-fit规则。当Edge解析CSS时，它无法识别规则，只是跳过它。如果您用其他属性或JS填充行为，这并不会改变Edge只是不知道它的事实。|102635|因此，在回答“如何在MS+Edge浏览器中使用JavaScript获取CSS规则对象匹配规则的值？”您可以执行window.getComputedStyle(ele).objectFit来获取值，并且它始终是undefined+(即使成功地进行了填充)。|102636|对于额外的问题:+Edge支持background-size:+cover，因此您应该能够将图像设置为display:inline-block元素的CSS背景，并获得您想要的行为。您可以相当容易地将<img>替换为带样式的<div>+...|102637|102638|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('+%2B+img.src+%2B+')';

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

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

.i+{
++display:+block;
++width:+100%25;
++height:+100%25;
++object-fit:+cover;
}|102640|<div+class="test">
++<img+src="https://dummyimage.com/640x240/333/444.png"+class="i"+/></div>|102641|102642|这只是基本思想--像object-fit-images这样的填充程序更进一步，并且支持像object-position这样的附加属性。|102643|或者(对于更多的超文本标记语言)，您可以保留<img>标记并将其包装在一个容器中，该容器的行为类似于对其应用object-fit。这就是object-fit-polyfill所做的。|102644|两个垫片都应该在Edge中起作用。|102645|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/bfred-it/object-fit-images|1|https://github.com/constancecchen/object-fit-polyfill^0|0|0|0|0|0|0|O|9|0|C|A|0|1J|12|2W|9|0|F|M|1F|K|2R|5|33|5|0|0|0|0|0|0|18|F|A|H|0|0|M|5|1I|A|1W|J|1|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|1R|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1T|8|@$P|1U|Q|1V|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1W|8|@$P|1X|Q|1Y|R|S]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1Z|8|@$P|20|Q|21|R|S]|$P|22|Q|23|R|S]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|24|8|@$P|25|Q|26|R|S]|$P|27|Q|28|R|S]|$P|29|Q|2A|R|S]|$P|2B|Q|2C|R|S]]|9|@]|A|$]]|$1|Z|3|C|5|6|7|2D|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|2E|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|F|7|2F|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|F|7|2G|8|@]|9|@]|A|$G|H]]|$1|16|3|C|5|6|7|2H|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2I|8|@$P|2J|Q|2K|R|S]]|9|@$P|2L|Q|2M|1|2N]]|A|$]]|$1|19|3|1A|5|6|7|2O|8|@$P|2P|Q|2Q|R|S]|$P|2R|Q|2S|R|S]]|9|@$P|2T|Q|2U|1|2V]]|A|$]]|$1|1B|3|1C|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2X|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]|1L|$5|1G|1H|1I|A|$1J|1M]]]]

<p>You should be able reference it directly:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// '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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.test{ color: red; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;test&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>That style property will be <code>undefined</code> in browsers that don't support it (like Edge) even with a polyfill.</p>

<p>The problem is that, as far as Edge is concerned: there <em>is no</em> <code>object-fit</code> rule. When Edge parses the CSS it fails to recognise the rule and just skips it. If you shim the behavior with other properties or JS that doesn't change the fact that Edge just doesn't know about it.</p>

<p>So, in answer specifically to <em>"So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?"</em> you can do <code>window.getComputedStyle(ele).objectFit</code> to get the value, and it's always <code>undefined</code> (even if successfully shimmed).</p>

<p>For the bonus question: <code>background-size: cover</code> <em>is</em> supported by Edge, so you should be able to set the image as a CSS background to a <code>display:inline-block</code> element and get the behaviour that you want. You can swap out the <code>&lt;img&gt;</code> for a styled <code>&lt;div&gt;</code> fairly easily...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
  width: 400px;
  height: 320px;
  overflow: hidden;
  border: 1px solid red;
}

.i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
  &lt;img src="https://dummyimage.com/640x240/333/444.png" class="i" /&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>That's just the basic idea - a shim like <a href="https://github.com/bfred-it/object-fit-images" rel="noreferrer">object-fit-images</a> takes this idea a lot further and supports additional properties like <code>object-position</code>.</p>

<p>Alternatively (and with a lot more HTML) you can keep the <code>&lt;img&gt;</code> tag and wrap it in a container that behaves like it's applying <code>object-fit</code> relative to it. This is what <a href="https://github.com/constancecchen/object-fit-polyfill" rel="noreferrer">object-fit-polyfill</a> has done.</p>

<p>Both shims should work in Edge.</p>


blocks|key|102194|text|我想使用适合对象的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|102195|规则。|blockquote|102196|102197|102198|您不需要在MS+Edge浏览器中使用JavaScript获取CSS规则object-fit规则的值，即可使img覆盖其父级。|offset|length|style|CODE|102199|额外的好处:不需要使用polyfill，可以在所有浏览器上运行，甚至可以在IE9上运行|102200|附注，MS+Edge版本。16支持object-fit|102201|这里有一个使用transform:+translate和min-width/height的解决方案，它与object-fit:+cover完全一样。|102202|​|102203|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%25;
++min-height:+100%25;
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,-50%25);
}|code-block|syntax|javascript|102204|<div>
++<img+src="https://dummyimage.com/640x240/333/444.png"+id="i"+/>
</div>|102205|102206|102207|如果需要，还可以使用CSS+@supports重置上述属性并添加object-fit。|102208|102209|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%25;
++min-height:+100%25;
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,-50%25);
}

@supports+(object-fit:+cover)+{
++#i+{
++++min-width:+auto;
++++min-height:+auto;
++++top:+auto;
++++left:+auto;
++++transform:+none;
++++width:+100%25;
++++height:+100%25;
++++object-fit:+cover;
++}
}|102210|<div>
++<img+src="https://dummyimage.com/640x240/333/444.png"+id="i"+/>
</div>|102211|102212|102213|当因为要在标记中设置图像源而需要使用img时，另一个被忽视的选择是对background-image源使用内联样式。|102214|鉴于这样的事实，在这种情况下，具有固定宽度/高度的div设置图像的边界，下面是一个简单的示例。|102215|102216|div+{
++width:+400px;
++height:+320px;
++box-sizing:+border-box;
++border:+1px+solid+gold;
++margin:+0+auto;
++overflow:+hidden;
++background-position:+center;
++background-size:+cover;
}|102217|<div+style="background-image:+url(https://dummyimage.com/640x240/333/444.png)">
</div>|102218|102219|102220|已更新|102221|当然，您也可以模仿object-fit:+contain|102222|102223|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%25;++++++++++++++++++++/*++changed+to+max++*/
++max-height:+100%25;+++++++++++++++++++/*++changed+to+max++*/
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,-50%25);
}|102224|<div>
++<img+src="https://dummyimage.com/640x240/333/444.png"+id="i"+/>
</div>|102225|102226|102227|基于注释更新的|102228|当涉及到为video模拟object-fit时，事情变得复杂得多。|BOLD|102229|video元素的响应方式与图像不同。|102230|这里有4个不同的示例，展示了一些视频在模仿cover时工作，而另一些视频在模仿contain时工作|102231|带有更大方形|102232|https://jsfiddle.net/zvtx6uy7/2/封面的video|unordered-list-item|102233|https://jsfiddle.net/zvtx6uy7/3/封面，带有更宽的video|102234|https://jsfiddle.net/zvtx6uy7/5/容器的video|102235|https://jsfiddle.net/zvtx6uy7/6/容器，带有更宽的|102236|的更方形的视频容器|102237|要获得与图像一致且同样好的效果，需要运行一个小脚本来获取视频的纵横比，然后根据其及其容器的纵横比将其宽度或高度设置为100%25。|102238|这是SO，simulate+background-size:cover+on++or+上的另一篇文章，它展示了一些更多的方法来实现这一点。|102239|102240|我发现的另一个选择是使用媒体查询及其max/min-aspect-ratio|102241|Fiddle+demo|102242|源：https://fvsch.com/code/video-background/|102243|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/CSS/@supports|1|https://jsfiddle.net/zvtx6uy7/2/|2|https://jsfiddle.net/zvtx6uy7/3/|3|https://jsfiddle.net/zvtx6uy7/5/|4|https://jsfiddle.net/zvtx6uy7/6/|5|https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img|6|https://jsfiddle.net/nmqzfwxj/|7|https://fvsch.com/code/video-background/^0|0|0|0|0|Z|A|1H|3|0|0|H|A|0|7|K|S|G|1G|H|0|0|0|0|0|0|W|A|A|D|0|0|0|0|0|0|0|I|3|Y|G|0|P|3|0|0|0|0|0|0|0|9|J|0|0|0|0|0|0|0|0|X|5|5|C|A|0|0|I|0|5|0|0|1D|L|5|13|7|0|0|6|0|0|14|0|W|1|0|0|19|0|W|2|0|0|14|0|W|3|0|0|14|0|W|4|0|0|9|0|0|1R|0|0|1X|5|12|5|0|0|0|12|I|K|0|0|B|0|B|6|0|0|16|2|14|7|0^^$0|@$1|2|3|4|5|6|7|3H|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|3I|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|3J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|3L|8|@$I|3M|J|3N|K|L]|$I|3O|J|3P|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|3Q|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|3R|8|@$I|3S|J|3T|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|3U|8|@$I|3V|J|3W|K|L]|$I|3X|J|3Y|K|L]|$I|3Z|J|40|K|L]]|9|@]|A|$]]|$1|S|3|T|5|6|7|41|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|42|8|@]|9|@]|A|$X|Y]]|$1|Z|3|10|5|W|7|43|8|@]|9|@]|A|$X|Y]]|$1|11|3|T|5|6|7|44|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|45|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|46|8|@$I|47|J|48|K|L]]|9|@$I|49|J|4A|1|4B]]|A|$]]|$1|15|3|T|5|6|7|4C|8|@]|9|@]|A|$]]|$1|16|3|17|5|W|7|4D|8|@]|9|@]|A|$X|Y]]|$1|18|3|19|5|W|7|4E|8|@]|9|@]|A|$X|Y]]|$1|1A|3|T|5|6|7|4F|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|4G|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|4H|8|@$I|4I|J|4J|K|L]|$I|4K|J|4L|K|L]]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|4M|8|@$I|4N|J|4O|K|L]]|9|@]|A|$]]|$1|1G|3|T|5|6|7|4P|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|W|7|4Q|8|@]|9|@]|A|$X|Y]]|$1|1J|3|1K|5|W|7|4R|8|@]|9|@]|A|$X|Y]]|$1|1L|3|T|5|6|7|4S|8|@]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|4T|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|4U|8|@]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|4V|8|@$I|4W|J|4X|K|L]]|9|@]|A|$]]|$1|1R|3|T|5|6|7|4Y|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|W|7|4Z|8|@]|9|@]|A|$X|Y]]|$1|1U|3|1V|5|W|7|50|8|@]|9|@]|A|$X|Y]]|$1|1W|3|T|5|6|7|51|8|@]|9|@]|A|$]]|$1|1X|3|-4|5|6|7|52|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|53|8|@]|9|@]|A|$]]|$1|20|3|21|5|6|7|54|8|@$I|55|J|56|K|22]|$I|57|J|58|K|L]|$I|59|J|5A|K|L]]|9|@]|A|$]]|$1|23|3|24|5|6|7|5B|8|@$I|5C|J|5D|K|22]|$I|5E|J|5F|K|L]]|9|@]|A|$]]|$1|25|3|26|5|6|7|5G|8|@$I|5H|J|5I|K|22]|$I|5J|J|5K|K|L]|$I|5L|J|5M|K|L]]|9|@]|A|$]]|$1|27|3|28|5|6|7|5N|8|@$I|5O|J|5P|K|22]]|9|@]|A|$]]|$1|29|3|2A|5|2B|7|5Q|8|@$I|5R|J|5S|K|22]]|9|@$I|5T|J|5U|1|5V]]|A|$]]|$1|2C|3|2D|5|2B|7|5W|8|@$I|5X|J|5Y|K|22]]|9|@$I|5Z|J|60|1|61]]|A|$]]|$1|2E|3|2F|5|2B|7|62|8|@$I|63|J|64|K|22]]|9|@$I|65|J|66|1|67]]|A|$]]|$1|2G|3|2H|5|2B|7|68|8|@$I|69|J|6A|K|22]]|9|@$I|6B|J|6C|1|6D]]|A|$]]|$1|2I|3|2J|5|6|7|6E|8|@$I|6F|J|6G|K|22]]|9|@]|A|$]]|$1|2K|3|2L|5|6|7|6H|8|@$I|6I|J|6J|K|22]]|9|@]|A|$]]|$1|2M|3|2N|5|6|7|6K|8|@$I|6L|J|6M|K|22]]|9|@$I|6N|J|6O|1|6P]]|A|$]]|$1|2O|3|-4|5|6|7|6Q|8|@]|9|@]|A|$]]|$1|2P|3|2Q|5|6|7|6R|8|@$I|6S|J|6T|K|22]|$I|6U|J|6V|K|L]]|9|@]|A|$]]|$1|2R|3|2S|5|6|7|6W|8|@$I|6X|J|6Y|K|22]]|9|@$I|6Z|J|70|1|71]]|A|$]]|$1|2T|3|2U|5|6|7|72|8|@$I|73|J|74|K|22]]|9|@$I|75|J|76|1|77]]|A|$]]|$1|2V|3|-4|5|6|7|78|8|@]|9|@]|A|$]]]|2W|$2X|$5|2Y|2Z|30|A|$31|32]]|33|$5|2Y|2Z|30|A|$31|34]]|35|$5|2Y|2Z|30|A|$31|36]]|37|$5|2Y|2Z|30|A|$31|38]]|39|$5|2Y|2Z|30|A|$31|3A]]|3B|$5|2Y|2Z|30|A|$31|3C]]|3D|$5|2Y|2Z|30|A|$31|3E]]|3F|$5|2Y|2Z|30|A|$31|3G]]]]

<blockquote>
  <p>I want to use object-fit CSS rule.</p>
</blockquote>

<p>You don't need to <em>obtain the value of CSS rule <code>object-fit</code> rule with JavaScript in MS Edge browser</em> to be able to make an <code>img</code> <em>cover</em> its parent.</p>

<p>Bonus: <em>No need to use a polyfill and works across all browsers down to IE9</em></p>

<p><em>Side note, MS Edge ver. 16 supports <code>object-fit</code></em></p>

<p>Here is a solution that works exactly as <code>object-fit: cover</code>, making use of <code>transform: translate</code> and <code>min-width/height</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img src="https://dummyimage.com/640x240/333/444.png" id="i" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>If you want you can use <a href="https://developer.mozilla.org/en/docs/Web/CSS/@supports" rel="nofollow noreferrer">CSS @supports</a> to also reset the above properties and add <code>object-fit</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img src="https://dummyimage.com/640x240/333/444.png" id="i" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>Another overlooked option when one <em>need to use an <code>img</code></em> because one want to set the image source in the markup, is to use a inline style for the <code>background-image</code> source.</p>

<p>Given the fact, in this case, where a <code>div</code> with fixed width/height sets the boundaries for the image, here is a simple sample of that.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-image: url(https://dummyimage.com/640x240/333/444.png)"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>Updated</p>

<p>You can of course mimic <code>object-fit: contain</code> as well</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img src="https://dummyimage.com/640x240/333/444.png" id="i" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p><strong>Updated based on a comment</strong></p>

<p>When it comes to mimic <code>object-fit</code> for <code>video</code> things gets much more complicated.</p>

<p>The <code>video</code> element doesn't respond in the same way an image does.</p>

<p>Here is 4 different samples showing that some video work when mimic <code>cover</code> and some when mimic <code>contain</code></p>

<ul>
<li><a href="https://jsfiddle.net/zvtx6uy7/2/" rel="nofollow noreferrer">https://jsfiddle.net/zvtx6uy7/2/</a>    <em>cover</em> with a more square video</li>
<li><a href="https://jsfiddle.net/zvtx6uy7/3/" rel="nofollow noreferrer">https://jsfiddle.net/zvtx6uy7/3/</a>    <em>cover</em> with a more wide video</li>
<li><a href="https://jsfiddle.net/zvtx6uy7/5/" rel="nofollow noreferrer">https://jsfiddle.net/zvtx6uy7/5/</a>    <em>contain</em> with a more square video</li>
<li><a href="https://jsfiddle.net/zvtx6uy7/6/" rel="nofollow noreferrer">https://jsfiddle.net/zvtx6uy7/6/</a>    <em>contain</em> with a more wide video</li>
</ul>

<p>To achieve a consistent and the same good result as with the image, one need to run a small script to get the video aspect ratio, and then set its width or height to 100% based on its and its container aspect ratio.</p>

<p>Here is another post at SO, <a href="https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img">simulate background-size:cover on &lt;video> or &lt;img></a>, which show some more approaches how one can go about this.</p>

<hr>

<p>One other option I found is to use media query and its <code>max/min-aspect-ratio</code></p>

<p><a href="https://jsfiddle.net/nmqzfwxj/" rel="nofollow noreferrer">Fiddle demo</a></p>

<p>Src: <a href="https://fvsch.com/code/video-background/" rel="nofollow noreferrer">https://fvsch.com/code/video-background/</a></p>


<p>I want to use <code>object-fit</code> CSS rule.<br>
This is not supported in MSIE and MS Edge Browser.<br>
While there are some polyfills for IE, there is none to my knowledge that works in Edge.</p>

<p>E.g. the polyfill <a href="https://github.com/jonathantneal/fitie" rel="nofollow noreferrer">fitie</a> by Jonathan Neal works with IE, but not in Edge (at least not on my machine). This is because fitie uses <code>element.currentStyle</code> and <code>element.runtimeStyle</code> which are MS only JS objects which do not any support in Edge browsers anymore. But if I use <code>window.getComputedStyle(element).getPropertyValue('object-fit')</code>, Edge returns nothing.</p>

<p><strong>So how do I obtain the value of CSS rule <code>object-fit</code> rule with JavaScript in MS Edge browser?</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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'));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log&lt;/p&gt;
&lt;div&gt;
&lt;img src="https://dummyimage.com/640x240/333/444.png" id="i" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h2>Edit</h2>

<p>It must be possible somehow, as it is not fully ignored.<br>
The Developer Tools show the rule curly underlined<br>
<a href="https://i.stack.imgur.com/mAhYH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mAhYH.png" alt="curly underlined"></a></p>

<hr>

<h2>Bonus question:</h2>

<p>Is there any polyfill for object-fit that works in Edge?</p>


How to get unknown style rule in MS Edge with JavaScript

容器

我想使用object-fit CSS规则。MSIE和MS Edge浏览器不支持此功能。虽然IE有一些多边形填充，但据我所知，没有一个可以在Edge中工作。例如，Jonathan Neal的polyfill 可以在IE上运行，但不能在Edge上运行(至少在我的机器上不能)。这是因为fitie使用了element.curr...

问如何在MS Edge中使用JavaScript获取未知样式规则
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在MS Edge中使用JavaScript获取未知样式规则EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在MS Edge中使用JavaScript获取未知样式规则
EN