webentwicklung-frage-antwort-db.com.de

IE und Edge Fix für Objektanpassung: Cover;

Ich benutze object-fit: cover; in meinem CSS für Bilder auf einer bestimmten Seite, da diese auf demselben height bleiben müssen. Es funktioniert gut in den meisten Browsern.

Aber wenn ich meinen Browser in IE oder Edge) skaliere, wird die Größe des Bildes in width (nicht in height) geändert, anstatt zu zoomen.

Welche CSS-Regel kann ich verwenden, um dies zu beheben?

Hier ist das Seite

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>

versuchen Sie dies, es sollte funktionieren. entferne auch float aus .row-fluid .span6

4
Lucian

Ich hatte ein ähnliches Problem. Ich habe es mit nur CSS gelöst.

Grundsätzlich gilt Object-fit: cover funktionierte nicht in IE und es wurden 100% Breite und 100% Höhe und Seitenverhältnis verzerrt. Mit anderen Worten, der Bildzoomeffekt war nicht da, den ich in Chrom sah.

Ich habe versucht, das Bild mit absolut in den Container zu platzieren und es dann genau in der Mitte zu platzieren unter Verwendung der Kombination:

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

Sobald es in der Mitte ist, gebe ich dem Bild,

// 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%;

Dadurch erhält das Bild den Effekt „Objektanpassung: Deckung“.

Hier ist eine Demonstration der obigen Logik.

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

Diese Logik funktioniert in allen Browsern.

15
Mohammed Furqan Rahamath M

Es gibt keine Regel, um dies nur mit CSS zu erreichen, außer dem object-fit (Das Sie gerade verwenden), das in Edge teilweise unterstützt wird 1 Wenn Sie dies in IE verwenden möchten, müssen Sie ein objektangepasste Polyfüllung verwenden, falls Sie nur das Element img verwenden möchten, andernfalls müssen Sie einige Problemumgehungen durchführen.

Sie können die object-fit Unterstützung sehen hier

UPDATE (2018)

1 - Edge hat jetzt teilweise Unterstützung für object-fit Seit Version 16, und teilweise bedeutet dies, dass es nur im img -Element funktioniert (zukünftige Version 18 noch) hat nur teilweise Unterstützung)

SS

UPDATE (2019)

Sie können ein einfaches JS-Snippet verwenden, um zu erkennen, ob object-fit Unterstützt wird, und dann das img durch ein svg ersetzen.

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

Sie können diesen js-Code verwenden. Nur ändern .post-thumb img mit Ihrem 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

Ich habe gerade das @ misir-jafarov benutzt und arbeite jetzt mit:

  • IE 8,9,10,11 und Kantenerkennung
  • wird in Bootrap 4 verwendet
  • nimm die Höhe seines Elternteils div
  • vertikal auf 20% und horizontal auf 50% gekürzt (besser für Porträts)

hier ist mein 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();
    });
}

Ich hoffe es hilft.

8
Meloman