Flexbox на IE11: изображение не расширяется ни по какой причине?

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

THIS IS POST TITLE

BLAH

И 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: пример того, что я имею в виду

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

57
задан 24 April 2016 в 14:49

2 ответа

в моей комбинации случая "уменьшения гибкого провода: 0 дюймов, предложенных G-Cyr и ", выравниваются - сам: гибкий провод - начинается" предложенный Rick Schoonbeek, добился цели. У меня была обертка, которая использовала поле гибкого провода для центрирования изображения с "выравнивать-по-ширине-содержанием: центр";

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

1
ответ дан 1 November 2019 в 15:38

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

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

.productImage {
    position: relative;
    overflow: hidden;

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

я затем понял, что мое изображение height: 100% было преступником расширенного изображения, и я просто удалил свою высоту, но затем мое изображение было наверху моего .productImage контейнер вместо того, чтобы центрироваться вертикально. Я представил гибкий провод здесь и расположил его через простое 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
ответ дан 1 November 2019 в 15:38

Другие вопросы по тегам:

Похожие вопросы: