Всем привет.
Нужна очень сложная структура чего-то типа плитки товара. Сверстать получается, но разваливается в Firefox. Прошу совета. Спасибо!
Плитка товара должна быть пропорциональна: менять высоту в зависимости от ширины. Зададим эту пропорциональность через padding-bottom: 50%;
Внутри, соответственно, абсолютно спозиционированный контекст:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
Получаем нужный пропорционально меняющийся контекст: https://jsfiddle.net/u7ab3ezo/
Картинка внутри должна быть 100% высоты этого контейнера и центрироваться. Делаем тег img
с height: 100%;
и пока что тоже все ок: https://jsfiddle.net/u7ab3ezo/4/
Но теперь на картинку нужно навешивать бейджик со скидкой в правый верхний угол, цену по низу и прочее. Делать это нужно именно по границам картинки. Для этого пробуем обернуть картинку в inline-block
с position: relative
: https://jsfiddle.net/u7ab3ezo/5/
В Firefox этот оборачивающий инлайн-блок (синий) разуплотняется так, как если бы картинка не масштабировалась:
Если подергать ширину экрана то в Firefox все совсем плохо, картинку улетает за границы экрана вообще. Справедливости ради скажу, что в хроме тоже проступает синий фон при изменении размеров окна, но при обновлении/открытии страницы тем не менее все хорошо.
Пробовал оборачивать в inline-flex, в table - не помогает. Помогает оборачивать в inline, но тогда синяя область получается не по высоте картинки, а по строке line-height и в верхние углы уже ничего не закинуть.
Подскажите, пожалуйста, можно ли добить этот вариант как-то? Может быть можно обернуть картинку инлайном, который будет в 100% высоты картинки? Или обертку как-то абсолютно спозиционировать?
UPD1: В итоге карточка у меня должна выглядеть так. Там более сложные обсчеты пропорциональности, более сложное позиционирование от отступов, но внутри лежит проблема описанная выше.
UPD2: Упрощенный и рабочий вариант этой обертки: https://jsfiddle.net/0v8whtrf/ В этом случае Firefox себя ведет так же как и остальные браузеры, тупит только при ресайзе. При открытии страницы - он молодец. Проблемы начинаются, когда я помещаю эту штука в какой-нибудь экстримальный контентекст типа пропорциональной плитки.
preview-wrap
и в других браузерах работает кривовато, потому что они с картинкой живут разными жизнями, думаю лучше сделать другой вариант, но для этого нужно более подробное описание что из себя представляет скидка и как вы её планируете выводить, можно попробовать через псевдоэлементafter
у изображения сделать – MasterAlex 28 июн '16 в 9:38