IE11의 Flexbox : 이유없이 이미지가 늘어 났습니까?

IE11의 Flexbox : 이유없이 이미지가 늘어 났습니까?

---

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;
}

이미지가 플렉스 컨테이너 내에서 늘어납니다.

적용 align-items: flex-start( "stretched"가 기본값이기 때문에 ...) 또는 justify-content: flex-start작동하지 않는 것 같습니다.

Codepen : 내가 의미하는 바의 예

내가 도대체 ​​뭘 잘못하고있는 겁니까?

---

이 재미있는 동작을 피하기 위해 flex-shrink속성을 재설정 할 수 있습니다.

Microsoft의 말에도 불구하고 이것은 버그처럼 보입니다.

< '플렉스 수축'>

플렉스 항목에 대한 플렉스 수축 계수 또는 음수 유연성을 설정합니다. 플렉스 축소 계수는 플렉스 컨테이너의 다른 항목에 비해 플렉스 항목이 얼마나 축소되는지를 결정합니다.

생략하면 요소의 부정적 유연성은 "0"입니다. 음수 값은 유효하지 않습니다.

출처 : https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://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

---

교차 축에 이미지 스트레치가 있습니다 (플렉스 방향을 사용하여 높이 늘리기 : 행).

이 stackoverflow Q / A를 통해 문제를 해결할 수있었습니다.

여기에 링크

내 img에 다음 CSS를 설정해야했습니다.

align-self: flex-start;

목표에 따라 flex-start ofcourse 이외의 다른 값이 필요할 수 있습니다. 내 이미지가 줄의 맨 위에있는 것입니다.

---

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%;
}

This solution is not for everyone's case but I hope it would be helpful.

---

in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"

All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.

---

I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%) and then it was ok. So essentially not using flexbox at all then.. #hateIE

---

I had an issue with stretched product images in IE11, and I did some research and tried different things.

This was my code:

.productImage {
    position: relative;
    overflow: hidden;

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

I then realized that my image height: 100% was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImage container instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0 but that didn't work either.

I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%); but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.

I ended up with this solution instead:

.productImage {
    position: relative;
    overflow: hidden;

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

It worked like a charm

참조 URL : https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason