Задать вопрос
Ответы пользователя по тегу Mozilla Firefox
  • Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

    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 (получше)
    Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)
    Ответ написан