IE 和 Edge 修复对象匹配：cover；
Posted
技术标签:
【中文标题】IE 和 Edge 修复对象匹配：cover；【英文标题】：IE and Edge fix for object-fit: cover; 【发布时间】：2016-10-14 01:08:00 【问题描述】：我在我的 CSS 中为特定页面上的图像使用了 object-fit: cover;，因为它们需要使用相同的 height。它在大多数浏览器中运行良好。
但是在 IE 或 Edge 中缩放我的浏览器时，图像在 width（不是 height）中调整大小，而不是缩放。图片变形了。
我可以使用什么 CSS 规则来解决这个问题？
这里是page
【问题讨论】：
令人沮丧的是它在 Edge 中不起作用.. 这里有一个很好的解决方案，它保留了使用 img 和一些 JS 处理 IE/edge 浏览器的背景版本的 SEO 优势。 medium.com/@primozcigler/… 最近遇到了同样的问题。这个轻量级的 polyfill 完成了这项工作 :) github.com/bfred-it/object-fit-images 【参考方案1】：我有类似的问题。我用 just CSS 解决了它。
基本上Object-fit: cover 在 IE 中不起作用，它占用 100% 的宽度和 100% 的高度，并且纵横比被扭曲。换句话说，我在 chrome 中看到的图像缩放效果不存在。
我采用的方法是使用 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/
此逻辑适用于所有浏览器。
【讨论】：
我喜欢这种方式，但是当容器的大小发生变化时，需要使用javascript来检测容器的比例。 @RicardoFerreira 是的。这个答案可以扩展为使用动态容器。【参考方案2】：除了object-fit（您当前正在使用的）之外，没有任何规则可以仅使用 CSS 来实现，它在 EDGE1 中有部分支持，所以如果如果你想在 IE 中使用它，你必须使用 object-fit polyfill 以防你只想使用元素 img，否则你必须做一些变通方法。
你可以看到object-fit支持here
更新（2019）
您可以使用简单的 JS sn-p 来检测是否支持 object-fit，然后将 img 替换为 svg
//ES6 version
if ('objectFit' in document.documentElement.style === false)
document.addEventListener('DOMContentLoaded', () =>
document.querySelectorAll('img[data-object-fit]').forEach(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`
)
)
//ES5 version transpiled from code above with BabelJS
if ('objectFit' in document.documentElement.style === false)
document.addEventListener('DOMContentLoaded', function()
document.querySelectorAll('img[data-object-fit]').forEach(function(image)
(image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(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='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
);
);
img
display: inline-flex;
width: 175px;
height: 175px;
margin-right: 10px;
border: 1px solid red
[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' />更新（2018 年）
1 - 自第 16 版起，EDGE 现在有 partial support 和 object-fit，部分表示仅适用于 img 元素（未来版本 18 仍然仅部分支持）
【讨论】：
background-size: cover 是 IE/Edge 的常用解决方法，可以解决大多数情况。
@TylerH 是的，但是你必须从 img 更改为 background img
也许是一个愚蠢的问题，但背景图像对 SEO 的好处不如实际图像？
img 更适合 SEO
@dippas 此外，background-image 也不是可访问性友好的。【参考方案3】：
我刚刚使用了@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();
);
希望对你有帮助。
【讨论】：
这也是正确的答案，所以它是特定于 IE 的。【参考方案4】：你可以使用这个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
);
);
【讨论】：
【参考方案5】：这是解决此问题的 CSS 解决方案。 使用下面的 css。
.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%;
来自 OP 的 html：
<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中删除浮动
【讨论】：
我做了一些改动。如果我想在右侧，还必须添加 50% 的宽度并删除 left:0。但它非常有用。谢谢！ 好像坏了。 @Dodekeract 你能说得更具体点吗？ Lucian Easy 现在，@Dodekeract 要求您改进答案以造福社区。span> @Lucian 抱歉不清楚。我想知道您是否可以解释为什么您采用的方法是 CSS 中回答上述问题的“唯一”方法？因为我有我的答案，在 CSS 中，它使用了不同的方法，但它仍然有效。我想明白你的意思。【参考方案6】：我取得了令人满意的结果：
min-height: 100%;
min-width: 100%;
这样您始终保持纵横比。
将替换“object-fit:cover;”的图像的完整 css：
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
transform: translate(50%, 0);
【讨论】：
【参考方案7】：父级：
height: 584px;
display: block;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
overflow: hidden;
background-color: #fff;
儿童图片
object-position: center center;
min-height: 100%;
display: block;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
width: auto;
min-width: 100%;
max-width: none;
-o-object-fit: cover; // you can keep them for modern browsers
object-fit: cover; // you can keep them for modern browsers
height: 100%;
小提琴：http://jsfiddle.net/j6hLaxz8/
【讨论】：
这是一个巧妙的解决方案，尤其是因为您解决了这个问题而没有求助于background-image。以上是关于IE 和 Edge 修复对象匹配：cover；的主要内容，如果未能解决你的问题，请参考以下文章
prepend/append 适用于 Chrome 和 Firefox，但不适用于 IE11 和 Edge