web-dev-qa-db-ja.com

Flexbox IE11の場合：理由なく画像が引き伸ばされていますか？

IE11でflexboxに問題があり、多くの既知の問題があることは知っていますが、解決策を見つけることができませんでした...

<div class="latest-posts">
    <article class="post-grid">
        <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
        <div class="article-content">
             <h2>THIS IS POST TITLE</h2>
             <p>BLAH</p>
        </div>
    </article>
</div>

そして、CSS ...

img {
  max-width: 100%;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
.article-content {
  padding: 20px 35px;
}

画像はflexコンテナ内で引き伸ばされています。

enter image description here

申請中 align-items: flex-start（「stretched」がデフォルト値だから...）またはjustify-content: flex-startは機能していないようです。

Codepen： 私が意味するものの例

何が間違っていますか？

htmlcsscss3internet-explorerflexbox
55
Jusi

このおかしな動作を避けるために、flex-shrinkプロパティ。

Microsoftが言っていることにもかかわらず、これはバグのように見えます。

<'flex-shrink'>

フレックスアイテムのフレックス収縮率または負の柔軟性を設定します。フレックス収縮率は、フレックスコンテナ内の他のアイテムと比較して、フレックスアイテムがどれだけ収縮するかを決定します。

省略した場合、要素の負の柔軟性は「0」です。負の値は無効です。

ソース： https://msdn.Microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspxhttps://msdn.Microsoft.com/ en-us // library/hh772069％28v = vs.85％29.aspx

img {
      max-width: 100%;
      flex-shrink: 0;
    }

img {
  max-width: 100%;
  flex-shrink: 0;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
article.post-grid .article-content {
  padding: 20px 35px;
}
<div class="latest-posts">
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>THIS IS POST TITLE</h2>
      <p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
      <p>Recommend new contented intention improving bed performed age.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>SHORT TITLE</h2>
      <p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
    </div>
  </article>
</div>

http://codepen.io/anon/pen/KzBOvq

129
G-Cyr

交差軸で画像をストレッチしました（flex-direction：rowを使用して高さをストレッチします）。

このstackoverflow Q/Aは私がそれを解決するのを助けました：

ここにリンク

Imgに次のcssを設定する必要がありました。

align-self: flex-start;

目標によっては、flex-start ofcourse以外の値が必要になる場合があります。私のイメージは行の一番上にあるようにすることです。

11
Rik Schoonbeek

IE11でも同様のバグがありました。スタイルはBootstrap 4.1から取られたので、私が持っていた流動的なイメージのために：

.img-fluid {
    border: none;
    height: auto;
    max-width: 100%;
}

私の場合、理由はmax-width: 100%にあるように見えたので、それをwidth: 100%に変更すると、バグは消えました。

.img-fluid {
    border: none;
    height: auto;
    width: 100%;
}

この解決策はすべての人に適したものではありませんが、役に立つと思います。

2
Sergey Sklyar

ここですべてのソリューションを試しましたが、何も機能しませんでした。 flexbox forを使用していたのは、別の画像をホバーするときに表示される画像を垂直方向に中央に置くことでした。したがって、top: 50%; transform: translateY(-50%) 。したがって、本質的にflexboxをまったく使用しない。#hateIE

0
OZZIE

IE11でストレッチされた製品イメージに問題があり、いくつかの調査を行い、さまざまなことを試しました。

これは私のコードでした：

_.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        height: 100%;
        object-fit: contain;
        top: 0;
    }
}
_

その後、自分の画像_height: 100%_が引き伸ばされた画像の原因であることに気付き、単に高さを削除しましたが、画像は垂直に中央揃えされるのではなく、_.productImage_コンテナの上部にありました。ここにflexを導入し、単純な_align-items: center_で配置しましたが、これはもちろんIE11では機能しませんでした。 _flex-shrink: 0_も試しましたが、それもうまくいきませんでした。

その後、フレックスの使用をスキップして古典的なtop: 50%; left: 50%; transform: translate(-50%, -50%);を試しましたが、画像のホバーエフェクトにズームを使用するための変換が既に使用されていたため、これも良くありませんでした。

代わりにこの解決策になりました：

_.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
}

_

それは魅力のように働いた

0
Jonatan Östling

私の場合、G-Cyrが提案した「flex-shrink：0」とRick Schoonbeekが提案した「align-self：flex-begin」の組み合わせがトリックを行いました。フレックスボックスを使用して、画像を「justify-content：center;」で中央揃えするラッパーがありました。

IE 11、Chrome、Safariでは、IE Edgeを除くすべてが良好でしたが、Edgeは正しく表示できませんでした。画像に2つの属性を追加すると、IE Edgeの問題が解決しました。

0
Masoud