Ankhena

Наверное, масштаб в браузере поставить 100%

Зависит от целей и задумок дизайнера.

Например, если отступ должен быть всегда одинаковый - это px, а если в ширину двух букв, то em, а если % от ширины, то соответственно % или vw. И т.д.

cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
проценты
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
background-size: 100%
Фон займет весь блок, но пропорции исказятся.

И, как обычно, против геометрии не попрешь.

Решения:
- заранее готовить изображения такими, чтобы они хорошо смотрелись при cover.
- использовать media и при разных размерах или ориентации показывать разные изображения

Так чтоль? https://jsfiddle.net/L23wy97m/

Подозреваю, что не работает не less, а css.

Сначала nth-child, а потом уже before. Потому что у before вообще детей нет.

Ну а в самом less:

.case-parameters(@cn) {
  .block-case li:nth-of-type(@{cn}):before {
  font-weight: bold;
  z-index: 1;
  position: absolute;
  margin-top: 35px;
  background: #fff;
  color: #FC0D55;
  font-size: 20px;
    content: "текст";
  width: 80px;
  height: 27px;
  display: block;
  line-height: 25px;
  text-indent: 10px;
}
}

https://jsfiddle.net/qpt0pf41/ и лишний div убрать.

Используйте единицы vw и vh, чтобы одинаково выглядел.
Чтобы не увеличивался - px

https://webref.ru/css/text-align-last
находится в гугле за 10 секунд

В вашем случае разумнее обойтись вообще без второй картинки.
При hover картинка делается полупрозрачной, цвет обертки - синий нужного оттенка.

https://jsfiddle.net/zexdvc6a/
Синий поставила самый простецкий, для примера. Подберите свой и прозрачность.