在IE 11中使用最大宽度和最大高度保持图像比例 [英] Keep image ratio using max-width and max-height in IE 11

问题描述

我正在尝试使图像适合容器内，同时保持其尺寸比例.根据方向，图像应采用完整的高度或宽度.我的解决方案确实可以在我测试过的所有浏览器上运行，但IE11(出奇地在10和9中运行).

I'm trying to get an image to fit inside a container while keeping it's size ratio. The image should take full height or width depending on orientation. My solution does work on all browsers I've tested but IE11(works in 10 and 9 surprisingly).

在IE 11中，图像在右侧被裁剪.如果可能的话，我想使用一种纯CSS的方式，而且我不在乎将其居中.

In IE 11 the image is cropped on the right. I'd like a pure css way if possible and I don't care about centering it.

这是JSFiddle: https://jsfiddle.net/wagad0u8/

Here is the JSFiddle : https://jsfiddle.net/wagad0u8/

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/400x780">
  </a>
</div>

.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align:middle;
}
#content-block *:last-child {
    margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
    height: 100%;
}
.img-flux {
    background-color: #ECECEC;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.owl-item{
  float:left;
  height:300px;
  margin-bottom:50px;
}

推荐答案

这似乎是IE11中的错误:错误报告.添加flex: 1(如报告中所示)

This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)

.img-flux img {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
}

为我工作.家长的Flexbox似乎还可以，因此即使居中也很容易.

works for me. Flexbox for the parent seems ok, so even centering is easy.

另一个选择是

flex: 0 0 auto;  /* IE */
object-fit: scale-down; /* FF */

上的

而不是flex: 1，从而增加了与Firefox的兼容性.查看评论和错误报告以获取更多信息.

on the img, instead of flex: 1 , increasing compatibility with Firefox. See comments and bug report for more info.

这篇关于在IE 11中使用最大宽度和最大高度保持图像比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！