web-dev-qa-db-ja.com

IE 11でmax-widthとmax-heightを使用して画像比率を維持

私は、サイズ比を維持しながら、コンテナ内に収まるように画像を取得しようとしています。画像は、向きに応じて完全な高さまたは幅を取る必要があります。私のソリューションは、私がテストしたすべてのブラウザーで動作しますが、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;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.owl-item{
  float:left;
  height:300px;
  margin-bottom:50px;
}
csscss3cross-browserinternet-explorer-11responsive
14
Mosset Jérémie

これはIE11のバグのようです： バグレポート 。 flex: 1の追加（レポートのように）

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

私のために働く。 Flexboxは親にとっては大丈夫と思われるので、センタリングさえ簡単です。

別のオプションは

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

flex: 1の代わりにimgで、Firefoxとの互換性を高めます。詳細については、コメントとバグレポートを参照してください。

33
benzkji
.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align: middle;
}
0
Tushar