web-dev-qa-db-ja.com

IEおよびオブジェクトフィットのエッジ修正：カバー。

特定のページの画像にCSSでobject-fit: cover;を使用しています。同じheightに固執する必要があるためです。ほとんどのブラウザでうまく機能します。

ただし、ブラウザをIEまたはEdgeでスケーリングすると、画像はズームではなくwidth（heightではなく）でサイズ変更されます。画像の形が崩れます。

これを修正するためにどのCSSルールを使用できますか？

ページ

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>

これを試してください、それは動作するはずです。 .row-fluid .span6からfloatも削除します

4
Lucian

同様の問題がありました。 CSSで解決しました。

基本的にObject-fit: coverはIEで動作せず、幅と高さが100％で、アスペクト比が歪んでいました。つまり、クロムで見た画像ズーム効果はありませんでした。

私が取ったアプローチは、absoluteでコンテナ内に画像を配置し、次に中央に配置することでした組み合わせを使用：

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

それが中心になったら、私はイメージに与えます、

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

これにより、画像にObject-fit：coverの効果が得られます。

上記のロジックのデモを次に示します。

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

このロジックは、すべてのブラウザーで機能します。

15
Mohammed Furqan Rahamath M

Edgeで部分的にサポートされているobject-fit（現在使用している）以外に、CSSのみを使用してそれを達成するルールはありません。1 IEでこれを使用する場合、要素imgのみを使用する場合は object-fit polyfill を使用する必要があり、そうでない場合はいくつかの回避策を実行する必要があります。

object-fitサポートを見ることができます こちら

アップデート（2018）

1-Edgeはバージョン16以降のobject-fitで 部分サポート になり、部分的にはimg要素でのみ機能することを意味します（将来のバージョン18stillは部分的なサポートしかありません）

SS

更新（2019）

簡単なJSスニペットを使用して、object-fitがサポートされているかどうかを検出し、imgを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

このjsコードを使用できます。 .post-thumb imgを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

私は@ misir-jafarovを使用しましたが、現在は次のように作業しています：

  • IE 8,9,10,11およびエッジ検出
  • bootrap 4で使用
  • 親divの高さを取得します
  • 上部の20％で垂直にクリップし、水平50％でクリップします（ポートレートに適しています）

ここに私のコードがあります：

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

それが役に立てば幸い。

8
Meloman