THIS IS POST TITLE
BLAH
У меня есть проблема с 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;
}
Изображения становятся расширенными в контейнере гибкого провода.
Применение align-items: flex-start
(Я фигурировал, так как "расширено" значение по умолчанию...), или justify-content: flex-start
кажется, не работает.
Codepen: пример того, что я имею в виду
Что я делаю неправильно?
в моей комбинации случая "уменьшения гибкого провода: 0 дюймов, предложенных G-Cyr и ", выравниваются - сам: гибкий провод - начинается" предложенный Rick Schoonbeek, добился цели. У меня была обертка, которая использовала поле гибкого провода для центрирования изображения с "выравнивать-по-ширине-содержанием: центр";
Все было хорошо в IE 11, Chrome, Safari кроме Края IE не смог отобразиться правильно. добавление двух атрибутов на изображении разрешило проблему с Краем IE.
У меня была проблема с расширенными образами товара в 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;
}
}
Это работало как очарование