IE et Edge fix pour ajustement d'objet: couverture;

Je suis en utilisant object-fit: cover; dans mon CSS pour les images sur une page spécifique, parce qu'ils ont besoin de rester sur la même height. Il fonctionne très bien dans la plupart des navigateurs.

Mais lors de la mise à l'échelle de mon navigateur IE ou Edge, l'image est en cours de redimensionnement dans width (pas height) au lieu de zoom. L'image est hors de forme.

Ce que la règle CSS puis-je utiliser pour résoudre ce problème?

Ici est la page

source d'informationauteur Peter van Remmen

  1. 6

    Il n'y a pas de règle à réaliser que l'utilisation de CSS, en plus de la object-fit (que vous utilisez actuellement), ce qui a une prise en charge partielle de BORD1 donc, si vous voulez l'utiliser dans IE, vous devez utiliser un object-fit polyfill dans le cas où vous souhaitez utiliser seulement l'élément imgsinon que vous avez à faire quelques solutions de contournement.

    Vous pouvez voir les object-fit soutien ici

    Mise à JOUR(2018)

    1 - EDGE a maintenant une prise en charge partielle pour object-fit depuis la version 16, et par partielle, cela signifie ne fonctionne que dans img élément (future version 18 encore n'a qu'une prise en charge partielle)

    IE et Edge fix pour ajustement d'objet: couverture;

  2. 5

    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
    });
});
  3. 4

    J'ai eu le même problème. Je résolus à l'aide de CSS.

    Fondamentalement Object-fit: cover ne fonctionnait pas sous IE, et c'était de prendre 100% de la largeur et de 100% de la hauteur et de rapport d'aspect a été déformée. En d'autres termes d'image effet de zoom n'était pas là dont j'ai été voir dans le navigateur chrome.

    J'ai pris le ci-dessous approche et il a travaillé pour moi. Peut-être quelqu'un avec le même problème pouvez lui donner un essai.

    //This is the div containing image
.card-b123 .image-wrapper {
    height: calc(100% - 4.5em);   //Your image container element dimensions 
    width: 100%;                  
}

//My image inside the above div wrapper
.card-b123 .image-wrapper img {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}

    Maintenant, dans mon cas, j'ai eu deux tuiles, il a été à l'horizontale (1x2) et une a la verticale (2x1), dans les deux d'entre eux, je voulais le look de object-fit:cover.

    Image D'Origine : Image D'Origine

    Verticale tuile bloc, j'ai ajouté :

    .card-b123 .image-wrapper img.vertical {
    height: 100%;
    width: auto;
}

    Verticale Tuile Bloc : Vertical Tuile bloc

    Horizontal tuile bloc, j'ai ajouté :

    .card-b123 .image-wrapper img.horizontal {
    height: auto;
    width: 100%;
}

    Horizontale Tuile Bloc : Horizontal Tuile bloc

    Cela a fonctionné pour moi parfaitement bien dans tous les navigateurs 🙂

  4. 3

    J'ai simplement utilisé l' @misir-jafarov et travaille maintenant avec les :

    • IE 8,9,10,11 et de détection de BORD
    • utilisé dans Bootrap 4
    • prenez de la hauteur de son parent div
    • cliped verticalement à 20% de haut et horizontal de 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();
    });
}

    Espère que cela aide.