Flexbox на IE11: изображение растянуто без причины?

Ответ 1

чтобы избежать этого смешного поведения, вы можете reset flex-shrink propertie.

Это выглядит как ошибка, несмотря на то, что Microsoft говорит:

< 'flex-shrink' >

Устанавливает коэффициент сжатия сгиба или отрицательную гибкость для гибкого элемента. Коэффициент сжатия flex определяет, насколько гибкий элемент будет уменьшаться относительно других элементов в контейнере гибких дисков.

Если опустить, отрицательная гибкость элемента - "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>

Ответ 2

У меня было растяжение изображения на поперечной оси (растяжение по высоте, используя flex-direction: row).

Этот стекопоток Q/A помог мне решить эту проблему:

Ссылка здесь

Я должен был установить следующую CSS на моем IMG:

align-self: flex-start;

Возможно, вам понадобится другое значение, чем гибкий старт, в зависимости от вашей цели. Мое, чтобы мое изображение было в верхней части ряда.

Ответ 3

У меня была похожая ошибка в 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%;
}

Это решение не для всех случаев, но я надеюсь, что это будет полезно.

Ответ 4

Я попробовал каждое решение здесь, но ничего не получалось. Единственное, для чего я использовал flexbox, было вертикальное центрирование изображения, отображаемого при наведении другого изображения. Так что я просто использовал более классическое решение а-ля top: 50%; transform: translateY(-50%) top: 50%; transform: translateY(-50%) и тогда все было в порядке. Так что, по сути, вообще не использовал flexbox.. #hateIE

Ответ 5

У меня была проблема с растянутыми изображениями продуктов в IE11, и я провел некоторые исследования и пробовал разные вещи.

Это был мой код:

.productImage {
    position: relative;
    overflow: hidden;

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

Затем я понял, что height: 100% моего изображения height: 100% была виновником растянутого изображения, и я просто снял свою высоту, но затем мое изображение было наверху моего контейнера .productImage вместо того, чтобы быть центрированным вертикально. Я представил Flex здесь и разместил его с помощью простого align-items: center, но это, конечно, не сработало в IE11. Я также попробовал flex-shrink: 0 но это тоже не сработало.

Затем я пропустил использование flex и попробовал классический top: 50%; left: 50%; transform: translate(-50%, -50%); 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;
    }
}

Оно работало завораживающе

Ответ 6

в моем случае комбинация "flex-shrink: 0", предложенная G-Cyr, и "align-self: flex-begin", предложенная Риком Шунбиком, сделали свое дело. У меня была оболочка, которая использовала flex box для центрирования изображения с помощью "justify-content: center;"

Все было хорошо в IE 11, Chrome, Safari, за исключением того, что IE Edge не мог отображаться правильно. добавление двух атрибутов на изображение решило проблему с IE Edge.