Как уменьшить картинку css?

Уменьшайте размеры самой коробки изображения через width и height: auto. Например, правило .photo { width: 300px; max-width: 100%; height: auto; display: block; } ограничит фото желаемой шириной и сохранит пропорции. Max-width не даст ему стать шире родителя на телефоне. Display: block убирает поведение строчной картинки с местом под базовую линию текста, но сам по себе размер не уменьшает.

Растянутые лица обычно возникают, когда ширина и высота принудительно заданы в соотношении, отличающемся от исходного изображения. Если нужна вся фотография без обрезки, автоматическая высота решает эту задачу проще, чем подбор второго числа вручную. Проверьте в Styles, нет ли другого правила height с большей силой в каскаде. Атрибуты width и height в HTML можно сохранить как сведения о естественной пропорции: обычные CSS-правила размеров управляют отображением поверх них.

Transform: scale уменьшает изображение визуально после расчета раскладки. Именно поэтому под ним могло остаться большое место: окружающий документ продолжает учитывать исходную коробку. Для фотографии внутри статьи такой способ обычно неудобен.

Уменьшенная на экране картинка не становится легче для загрузки. Если исходник слишком тяжелый, подготовьте подходящие файлы и при необходимости задайте варианты через srcset и sizes. Не увеличивайте маленький исходник без необходимости, иначе проявится размытость. После изменения проверьте и широкую статью, и узкий контейнер, поскольку размер окна и ширина конкретной колонки могут различаться. Содержимое фотографии при этом должно оставаться полностью видимым.