Почему изображение в Firefox растягивается по ширине?

Изображение в Firefox может растягиваться по ширине из-за того, что может применяться свойство `width: 100%` или другие стили, которые могут влиять на размер изображения. Другая причина может быть связана с тем, что изображение имеет фиксированную ширину, но его контейнер растягивается из-за других стилей или свойств.

Для создания блока, внутри которого отображается контент и изображение, выровненное по правой стороне, можно использовать следующий CSS:

```css
.container {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  right: 0;
}

.content {
  padding-right: /* ширина изображения */;
}
```

В данном примере, контейнеру с классом `container` добавляется свойство `position: relative;`, чтобы изображение с классом `image`, имеющее свойства `position: absolute; right: 0; top: 0;`, выравнивалось относительно этого контейнера. Также, блок с контентом (content) может иметь правый отступ, равный ширине изображения, чтобы избежать перекрытия текста и изображения.

Этот подход должен корректно отображаться как в Google Chrome, так и в других браузерах.

Это увлекательная история. 
 Вот представьте себя на месте браузера. 
 Что видите в коде: 
 Картинка должна занять 100% высоты и width auto. 
 Как будете рисовать высоту, если у родителя картинки высота тоже 100%, у его родителя тоже нет и т.д. до самого верха. От чего считать проценты? Вроде есть какой-то намек из top 0 и bottom 0. Не прямой, конечно, но хоть что-то. 
 Теперь про ширину: написано нарисуй авто. Размер в атрибуте не задан, но можно посмотреть, что там у файла.  И хотелось бы сохранить пропорции. 
 Следующий этап размышлений о том, что делать с picture. Вроде надо растянуть по содержимому, но у него auto,  которым и так сложно решить что делать. 
 
 Как рисовать будете? Как догадаетесь что хотел сказать верстальщик, если у браузера нет возможности заглянуть ни к вам в голову ни в макет? 
 
 Ну вот FF берет в качестве ширины для picture исходную ширину картинки. 
 
 Всё это о том, что когда нет четких инструкций что делать, браузер пытается как-то интерпретировать написанное. Разные браузеры будут делать это по-разному. Причем с течением времени это поведение может меняться. 
 
 Как исправить: 
 Вариант 1 (похуже) 
 Тег picture тег с особенностями и ещё и часто не известно, будет ли он вообще в разметке или клиенты его потеряют. 
 Поэтому самое умное, что можно ему задать это display: contents; , чтобы не мешался. 
 И дальше работать с оберткой. Тут вариантов много. Например, задать пропорции, а картинке object-fit. Правда у FF есть проблемы с aspect-ratio от высоты. 
 
 Вариант 2 (получше) 
 Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)