html - not - ie11 flex image height



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

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

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

https://src-bin.com

У меня проблема с 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;
}

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

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

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

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


Answer #1

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

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


Answer #2

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


Answer #3

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

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





flexbox