Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

Наблюдаю такую странную шуку - создаю блок внутри которого есть контент и картинка, картинка позиционируется по правой стороне через
position: absolute;
right:0;
top:0;
bottom:0;


в Гугл хром отображается все корректно:
6617c870e68d2372001327.png

В Firefox элемент picture почему-то растягивается и занимает большую часть контейнера где он лежит
6617c8ba2d216249927551.png

тегу picture задал синий фон для наглядности, пример с кодом ниже:


Как это исправить и почему это происходит?
  • Вопрос задан
  • 1142 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Это увлекательная история.
Вот представьте себя на месте браузера.
Что видите в коде:
Картинка должна занять 100% высоты и width auto.
Как будете рисовать высоту, если у родителя картинки высота тоже 100%, у его родителя тоже нет и т.д. до самого верха. От чего считать проценты? Вроде есть какой-то намек из top 0 и bottom 0. Не прямой, конечно, но хоть что-то.
Теперь про ширину: написано нарисуй авто. Размер в атрибуте не задан, но можно посмотреть, что там у файла. И хотелось бы сохранить пропорции.
Следующий этап размышлений о том, что делать с picture. Вроде надо растянуть по содержимому, но у него auto, которым и так сложно решить что делать.

Как рисовать будете? Как догадаетесь что хотел сказать верстальщик, если у браузера нет возможности заглянуть ни к вам в голову ни в макет?

Ну вот FF берет в качестве ширины для picture исходную ширину картинки.

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

Как исправить:
Вариант 1 (похуже)
Тег picture тег с особенностями и ещё и часто не известно, будет ли он вообще в разметке или клиенты его потеряют.
Поэтому самое умное, что можно ему задать это display: contents;, чтобы не мешался.
И дальше работать с оберткой. Тут вариантов много. Например, задать пропорции, а картинке object-fit. Правда у FF есть проблемы с aspect-ratio от высоты.

Вариант 2 (получше)
Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы