web-dev-qa-db-fra.com

IE et le correctif Edge pour object-fit: cover;

J'utilise object-fit: cover; dans mes CSS pour les images d'une page spécifique, car elles doivent rester sur le même height. Cela fonctionne très bien dans la plupart des navigateurs.

Mais lors de la mise à l'échelle de mon navigateur dans IE ou Edge), l'image est redimensionnée dans width (et non par height) au lieu d'un zoom. L'image est déformée.

Quelle règle CSS puis-je utiliser pour résoudre ce problème?

Voici le page

csscss3internet-explorermicrosoft-edge
28
Peter van Remmen
.row-fluid {
  display: table;
}

.row-fluid .span6 {
  display: table-cell;
  vertical-align: top;
}

.vc_single_image-wrapper {
  position: relative;
}

.vc_single_image-wrapper .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
<div class="vc_single_image-wrapper   vc_box_border_grey">
  <div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>

essayez ceci, ça devrait marcher. supprimer également float de .row-fluid .span6

4
Lucian

J'ai eu le même problème. Je l'ai résolu avec seulement CSS .

Fondamentalement Object-fit: cover ne fonctionnait pas dans IE et il prenait 100% de la largeur et 100% de la hauteur et les proportions étaient déformées. En d’autres termes, l’effet de zoom d’image n’était pas là ce que je voyais en chrome.

L’approche que j’ai choisie consistait à positionner l’image à l’intérieur du conteneur avec absolute , puis et placez-la au centre en utilisant la combinaison:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Une fois au centre, je donne à l'image,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Cela donne à l'image l'effet de Object-fit: cover.

Voici une démonstration de la logique ci-dessus.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Cette logique fonctionne dans tous les navigateurs.

15
Mohammed Furqan Rahamath M

Il n’existe aucune règle permettant d’atteindre cet objectif avec CSS uniquement, à part le object-fit (que vous utilisez actuellement), qui est partiellement pris en charge dans Edge 1  donc si vous voulez utiliser ceci dans IE, vous devez utiliser un object-fit polyfill au cas où vous voudriez utiliser uniquement l'élément img, sinon vous devrez faire quelques solutions de contournement.

Vous pouvez voir le object-fit support ici

MISE À JOUR (2018)

1 - Edge a maintenant support partiel pour object-fit depuis la version 16, et par partiel, cela signifie que ne fonctionne que dans l’élément img (la version future 18 n’a toujours qu’un support partiel)

SS

MISE À JOUR (2019)

Vous pouvez utiliser un extrait de code JS simple pour détecter si le object-fit est pris en charge puis remplace le img par un svg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />
11
dippas

Vous pouvez utiliser ce code js. Il suffit de changer .post-thumb img avec votre img.

$('.post-thumb img').each(function(){           // Note: {.post-thumb img} is css selector of the image tag
    var t = $(this),
        s = 'url(' + t.attr('src') + ')',
        p = t.parent(),
        d = $('<div></div>');
    t.hide();
    p.append(d);
    d.css({
        'height'                : 260,          // Note: You can change it for your needs
        'background-size'       : 'cover',
        'background-repeat'     : 'no-repeat',
        'background-position'   : 'center',
        'background-image'      : s
    });
});
9
Misir Jafarov

Je viens d'utiliser le @ misir-jafarov et travaille maintenant avec:

  • IE 8,9,10,11 et détection de bord
  • utilisé dans Bootrap 4
  • prendre la hauteur de sa div parent
  • clipé verticalement à 20% du haut et horizontalement à 50% (mieux pour les portraits)

voici mon code:

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    jQuery('.art-img img').each(function(){
        var t = jQuery(this),
            s = 'url(' + t.attr('src') + ')',
            p = t.parent(),
            d = jQuery('<div></div>');

        p.append(d);
        d.css({
            'height'                : t.parent().css('height'),
            'background-size'       : 'cover',
            'background-repeat'     : 'no-repeat',
            'background-position'   : '50% 20%',
            'background-image'      : s
        });
        t.hide();
    });
}

J'espère que ça aide.

8
Meloman