Comment obtenir la règle de style inconnue dans MS Edge avec JavaScript

Vous devriez être en mesure de référence directement:

// '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>

Cette propriété de style sera undefined dans les navigateurs qui ne le supportent pas (comme Edge) même avec un polyfill.

le problème est que, en ce qui concerne Edge: il y a neobject-fit la règle. Lorsque Edge analyse la CSS, elle ne reconnaît pas la règle et la saute tout simplement. Si vous shim le comportement avec d'autres propriétés ou JS qui ne change pas le fait que Edge ne sait tout simplement pas à ce sujet.

Alors, pour répondre spécifiquement à " alors comment puis-je obtenir la valeur de la règle CSS object-fit rule avec JavaScript dans le navigateur MS Edge?" vous pouvez faire window.getComputedStyle(ele).objectFit pour obtenir la valeur, et c'est toujours undefined (même avec succès shimmed).

pour la question bonus:background-size: cover prise en charge par le Bord, de sorte que vous devriez être en mesure de définir l'image comme fond de CSS pour un display:inline-block élément et obtenir le comportement que vous voulez. Vous pouvez remplacer le <img> pour un style <div> assez facilement...

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>

C'est juste l'idée de base - une cale comme objet-fit-images va beaucoup plus loin et supporte des propriétés supplémentaires comme object-position.

alternativement (et avec beaucoup plus de HTML) vous pouvez garder le <img> et la balise de l'envelopper dans un récipient qui se comporte comme c'est l'application object-fit par rapport à elle. C'est ce que objet-fit-polyfill a fait.

les deux cales devraient fonctionner en bordure.

je veux utiliser la règle CSS "objet-fit".

Vous n'avez pas besoin de obtenir la valeur de la règle CSS object-fit règle avec le JavaScript dans MS Bord du navigateur pour être en mesure de faire un imgcouverture son parent.

Bonus:Pas besoin d'utiliser un polyfill et fonctionne sur tous les navigateurs vers le bas pour IE9

note de Côté, MME Bord ver. 16 prend en charge object-fit

Voici une solution qui fonctionne exactement comme object-fit: cover, faisant usage de transform: translate et 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>

---

Si vous le souhaitez, vous pouvez utiliser CSS @supports pour également réinitialiser les propriétés ci-dessus et ajouter 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>

---

une autre option négligée quand unebesoin d'utiliser un img parce qu'on veut définir la source de l'image dans le markup, c'est d'utiliser un style inline pour l' background-image source.

étant donné le fait, dans ce cas, où un div fixe largeur/hauteur fixe les limites de l'image, voici un exemple simple de cette.

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>

---

mise à Jour

vous pouvez bien sûr imiter object-fit: contain ainsi

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>

---

mise à Jour basé sur un commentaire

Quand il s'agit d'imiter object-fitvideo les choses deviennent beaucoup plus compliquées.

video l'élément ne répond pas de la même façon qu'une image.

voici 4 exemples différents montrant qu'une vidéo fonctionne quand mimic cover et certains quand imiter contain

• https://jsfiddle.net/zvtx6uy7/2/couverture avec un plus de place vidéo
• https://jsfiddle.net/zvtx6uy7/3/ couverture avec une vidéo plus large
• https://jsfiddle.net/zvtx6uy7/5/contient avec un plus de place vidéo
• https://jsfiddle.net/zvtx6uy7/6/contient avec une vidéo plus large

pour obtenir un résultat cohérent et aussi bon qu'avec l'image, il faut exécuter un petit script pour obtenir le rapport d'aspect de la vidéo, puis régler sa largeur ou sa hauteur à 100% basé sur son et son container format ratio.

Voici un autre post, DONC, simuler background-size:cover sur , qui montrent quelques autres approches comment on peut s'y prendre.

---

une autre option que j'ai trouvée est d'utiliser media query et son max/min-aspect-ratio

Violon démo

Src: https://fvsch.com/code/video-background/