IE 和 Edge 修复对象适合:封面； [英] IE and Edge fix for object-fit: cover;

问题描述

我在 CSS 中为特定页面上的图像使用 object-fit:cover;，因为它们需要保持相同的 height.它在大多数浏览器中运行良好.

但是在 IE 或 Edge 中缩放浏览器时，图像以 width(不是 height)调整大小而不是缩放.图像变形.

我可以使用什么 CSS 规则来解决这个问题?

这是页面

解决方案

这是解决此问题的 CSS 解决方案.使用下面的css.

.row-fluid {显示:表；}.row-fluid .span6 {显示:表格单元格；垂直对齐:顶部；}.vc_single_image-wrapper {位置:相对；}.vc_single_image-wrapper .image-wrapper {位置:绝对；顶部:0；左:0；底部:0；右:0；背景尺寸:封面；背景重复:不重复；背景位置:50% 50%；}

来自 OP 的 HTML:

<div class="image-wrapper";风格=背景图片:网址(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></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

解决方案

Here's a CSS solution to fix this. Use the below 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:

<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 和 Edge 修复对象适合:封面；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！