Почему изображение в 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, так и в других браузерах.

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