Aetae

Очевидно: в зависимости от задачи.
resize - realtime пропорциональная зависимость от размеров всего окна.
matchMedia - единоразовые изменения по breakpoint'ам.
ResizeObserver - слежение за конкретным элементом (который может и не менять размеров при изменении окна\media).

Place image -> Place

Ну или отрубить это тупое eslint правило.

Яб не парился и сделал как-то так:

Есть много способов, но мне нравится вот такой трюк.

>браузер
Какой, , браузер? Хром, Осёл, Фокс? А может древняя опера тебя радует?
Очевидно что такие технические вещи, не относящиеся к веб-стандартам, имеют совершенно разные решения в зависимости от конкретного приложения.
Например в firefox есть параметр командной строки предназначенный специально для этого:
--kiosk URL. Для других браузеров потрудитесь нагуглить сами.

Именно так и работает блокировщик. Избегайте "ad" в любых названиях.
И это ещё хорошо, что ваш случай так очевиден, бывают и куда печальнее ситуации. Например один из стандартных фильтров блокирует картинки размером 370x<не помню>. Просто потому что часто именно такого размера рекламный банер. Случайно сделал такой размер и попал.)

Для конкретного сайта в принципе можно добавить исключения, как себе так и в глобальные списки. Но исключения в списки принимаются крайне неохотно, куда проще поправить свой сайт.

addEventListener('mouseover', ({target, relatedTarget}) => {
  if(relatedTarget) 
    relatedTarget.classList.remove('hover');
  if(target) 
    target.classList.add('hover')
})

Видел тут: https://ant.design/components/progress/
Но это часть системы, придётся расковырять сырцы, если нужно отдельно.

"Чистую" версию тоже когда-то вроде встречал, но тут, увы, ссылок не дам.