小编Mos*_*mie的帖子

我正在尝试将图像放入容器内,同时保持其大小比例.图像应取整个高度或宽度,具体取决于方向.我的解决方案适用于我测试的所有浏览器,但IE11(令人惊讶的是在10和9中工作).

在IE 11中,图像在右侧裁剪.如果可能的话,我想要一种纯粹的CSS方式,我不关心它的居中.

这是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; …