Андрей

Очень мило, плюсик в карму :)
{
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
https://jsfiddle.net/o5o6m1dh/

https://jsfiddle.net/j4vbjfmm/

А чем классический вариант с max-width: 100%; height: auto; не подходит?
Если же нужно более гибкое решение с заданным соотношением сторон то можно погуглить padding hack.
andyshora.com/css-image-container-padding-hack.html например

www.catchmyfame.com/2009/06/25/jquery-beforeafter-...

zurb.com/playground/twentytwenty

Если чутка вмешаться в разметку то вполне себе получится перекрашивать любой элемент списка.
https://codepen.io/m1roku/pen/QgZzaJ

Это забавно, но на моем мак в фф все окей, а вот в сафари:
https://www.dropbox.com/s/3jf7c9go6dfhwjf/%D0%A1%D...

ff ver. 54.0.1
safari ver. 10.1.1 (12603.2.4)

Как-то размыта проблема. Блок у тебя в коде, по крайней мере, по вертикали отцентрован.
https://jsfiddle.net/ugb2uLdb/2/
Что бы сжать его в пределах родителя, не знаю, задай ему max-width: 100%;
https://jsfiddle.net/ugb2uLdb/3/
Что бы баннер не сжимался, а обрезался задай родителю overflow: hidden;
https://jsfiddle.net/ugb2uLdb/4/

a {display:block;} и li, если обозначены как inline-block, дай им width:100%;

Как вариант
https://jsfiddle.net/fo4bqzLp/1/

Таки я думаю что у вас ничего не выйдет по совету сверху, input'ы упрутся в li которые упираются в ul потому что он имеет display: inline-block;
Я вроде как придумал задать им width но потом вспомнил про их мерзкое и неподобающее поведение в приличном обществе, эти их самовольные отступы, создающие проблемы (css-live.ru/articles/zagadochnye-otstupy-mezhdu-in...
Предлагаю, в рамках использования только блочных элементов, сделать что-то типа такого:
https://jsfiddle.net/2rax11f9/