Казалось бы, что может быть проще картинки на сайте? Вставляешь <img src="your_link" alt="image content">, добавляешь CSS — и готово. Но у самого обычного элемента есть скрытые странности.
Браузеры по умолчанию применяют к img стиль overflow: clip — всё, что вылезает за границы, обрезается. При этом у картинки есть «контейнер» (сам <img>) и «контент» (само изображение). Поэтому переполнение возможно. Например, object-fit: cover подгоняет изображение под контейнер, сохраняя пропорции, и часть становится больше контейнера — вот overflow. Его можно показать, если поменять overflow на visible.
Картинка может переполнять собственные скруглённые углы при border-radius. А при object-position: 50px 0 контент сдвигается на 50px и тоже создаёт overflow.
Дальше — object-fit. Все помнят cover и contain, но есть значение none. Оно не растягивает и не сжимает картинку: контент остаётся с собственной шириной и высотой, даже если сам элемент растянут через CSS на 80vw на 80vh. Если контейнер меньше контента — снова переполнение. А значение по умолчанию у object-fit — вовсе не none, а fill. Оно работает наоборот: картинка всегда растягивается под размер элемента.
Это проясняет термин «replaced element». Это элемент, чей контент находится вне CSS formatting model — например, изображение, которое подставляет src. У такого контента есть естественные размеры, они участвуют в layout-расчётах, но сам контент не форматируется по обычным CSS-правилам.
Демки: hover-эффект с рамкой, 3D-вариант, entry-анимация через @starting-style. Ещё автор показывает экранный лоадер на одном <img>: задаёшь object-fit: none, делаешь intrinsic-размер меньше CSS-размера и анимируешь object-position двумя keyframes. Свойство animation-composition: add складывает анимации по осям X и Y.
В конце — декоративный эффект с corner-shape, пока только в Chrome. Автор замечает: те же штуки можно сделать привычными методами, но эти трюки спасают, когда нельзя менять HTML. Напоследок — ссылка на статью How to style a broken image. Так что «простой img» — это маленький контейнер, который умеет переполнять сам себя.