对象适合的IE和边缘修复：盖; [英] IE and Edge fix for object-fit: cover;

问题描述

我在我的CSS中使用 object-fit：cover; 在特定页面上的图片，因为他们需要坚持在同一个 height 。它在大多数浏览器中工作得很好。

但是当在IE或Edge中缩放浏览器时，图片会在 width c> height ），而不是缩放。

这里是我们可以使用的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-position：50％50％;}  

  div class =vc_single_image-wrapper vc_box_border_grey> < div class =image-wrapperstyle =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

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.

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.

What CSS rule can I use to fix this?

Here is the page

解决方案

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

try this, it should work. also remove float from .row-fluid .span6

这篇关于对象适合的IE和边缘修复：盖;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！