it-swarm.com.ru

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

У меня проблема с flexbox на IE11, и хотя я знаю, что есть много известных проблем, я не смог найти решение ...

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

Изображения растягиваются внутри гибкого контейнера.

 enter image description here

Применение align-items: flex-start (я понял, поскольку значение по умолчанию является вытянутым ...) или justify-content: flex-start, похоже, не работает.

Codepen: пример того, что я имею в виду

Что я делаю неправильно?

41
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

93
G-Cyr

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

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

Ссылка здесь

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

align-self: flex-start;

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

5
Rik Schoonbeek

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

0
OZZIE

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

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

0
Sergey Sklyar

У меня была проблема с растянутыми изображениями продуктов в 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, но это тоже не сработало.

Затем я пропустил использование flex и попробовал классическую функцию 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