CSS IE 和 Edge 修复对象适合：封面；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37792720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE and Edge fix for object-fit: cover;
提问by Peter van Remmen
I'm using object-fit: cover;in my CSS for images on a specific page, because they need to stick on the same height. It works great in most browsers.
我object-fit: cover;在我的 CSS 中使用特定页面上的图像，因为它们需要坚持相同的height. 它在大多数浏览器中运行良好。
But when scaling my browser in IE or Edge, the image is resizing in width(not height) instead of zooming. The image gets out of shape.
但是在 IE 或 Edge 中缩放我的浏览器时，图像正在调整width（不是height）而不是缩放。图像变形。
What CSS rule can I use to fix this?
我可以使用什么 CSS 规则来解决这个问题？
Here is the page
这是页面
采纳答案by Lucian
Here is the only CSS solution to fix this.Use the below css.
这是解决此问题的唯一 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%;
}
HTML from the OP:
来自 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>
try this, it should work. also remove float from .row-fluid .span6
试试这个，它应该工作。也删除浮动.row-fluid .span6
回答by Furqan Rahamath
I had similar issue. I resolved it with just CSS.
我有类似的问题。我只用 CSS解决了它。
Basically Object-fit: coverwas not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.
基本上Object-fit: cover在 IE 中不起作用，它采用 100% 宽度和 100% 高度，并且纵横比被扭曲。换句话说，我在 chrome 中看到的图像缩放效果不存在。
The approach I took was to position the image inside the container with absoluteand then place it right at the centreusing the combination:
我采用的方法是使用绝对值将图像定位在容器内 ，然后使用组合将其放置在中心位置：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the 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%;
This makes the image get the effect of Object-fit:cover.
这使得图像得到了 Object-fit:cover 的效果。
Here is a demonstration of the above logic.
下面是对上述逻辑的演示。
https://jsfiddle.net/furqan_694/s3xLe1gp/
https://jsfiddle.net/furqan_694/s3xLe1gp/
This logic works in all browsers.
此逻辑适用于所有浏览器。
回答by dippas
There is no rule to achieve that using CSS only, besides the object-fit(that you are currently using), which has partial support in EDGE1so if you want to use this in IE, you have to use a object-fit polyfillin case you want to use just the element img, otherwise you have to do some workarounds.
没有规则可以仅使用 CSS 来实现这一点，除了object-fit（您当前正在使用的），它在 EDGE 1 中得到部分支持，因此如果您想在 IE 中使用它，则必须使用适合对象的 polyfill，以防万一只想使用 element img，否则您必须做一些解决方法。
You can see the the object-fitsupport here
你可以在这里看到object-fit支持
UPDATE(2018)
更新（2018）
1 - EDGE has now partial supportfor object-fitsince version 16, and by partial, it means only works in imgelement (future version 18 stillhas only partial support)
1 -从版本 16 开始，EDGE 现在部分支持，部分支持object-fit，这意味着仅适用于img元素（未来版本 18仍仅部分支持）
UPDATE(2019)
更新（2019）
You can use a simple JS snippet to detect if the object-fitis supported and then replace the imgfor a svg
您可以使用一个简单的 JS 代码段来检测是否 object-fit支持，然后替换img为svg
//ES6 version
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`
})
})
}
//ES5 version transpiled from code above with BabelJS
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), 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' />回答by Meloman
I just used the @misir-jafarov and is working now with :
我刚刚使用了@misir-jafarov，现在正在使用：
- IE 8,9,10,11 and EDGE detection
- used in Bootrap 4
- take the height of its parent div
- cliped vertically at 20% of top and horizontally 50% (better for portraits)
- IE 8,9,10,11 和 EDGE 检测
- 在 Bootrap 4 中使用
- 取其父 div 的高度
- 垂直裁剪为顶部的 20%，水平裁剪为 50%（更适合人像）
here is my 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();
});
}
Hope it helps.
希望能帮助到你。
回答by TheMisir
You can use this js code. Just change .post-thumb imgwith your img.
你可以使用这个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
});
});
回答by Ini Kim
I achieved satisfying results with:
我取得了令人满意的结果：
min-height: 100%;
min-width: 100%;
this way you always maintain the aspect ratio.
这样您就可以始终保持纵横比。
The complete css for an image that will replace "object-fit: cover;":
将替换“object-fit：cover;”的图像的完整css：
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
transform: translate(50%, 0);
