Ingernirated

Можно еще использовать в вашем случае vw, но это если блоки будут занимать всю ширину окна https://jsfiddle.net/7stpe52k/13/ Ну или как чел выше написал, через padding

Пример

www.mademyday.de/css-height-equals-width-with-pure...

https://jsfiddle.net/wn7Lsmgr/
Центрирование или позиционирование сами доделайте. Для IE полифил.
Но я бы переделала на bg.

.boxes {
	width:100%;
	height:100vh;
	background-color:green;
	position: relative;
	z-index:100;
}

https://jsfiddle.net/pdn5cht3/

Вся соль в position, при auto свойство z-index наследуется от родительского блока.
transform: translate добавлен только для сдвига вправо, чтобы было видно как блоки проходят над fixed блоком.

И как правильно заметил Alex, z-index в этом примере вообще не нужен https://jsfiddle.net/pdn5cht3/1/

1. уберите везде z-index, он тут не нужен.
2. .slider и .boxes поставьте position relative

https://jsfiddle.net/8eLnfg69/15/ я верно понял ?

position: absolute;
или
display: inline-block;

https://jsfiddle.net/fj4gwu1h/3/

Можно использовать vw, vh, vmax или vmin
Пример с vw
Пример c vmin
Единицы измерения vh, vw, vmin, vmax

Вы можете задать тегу html размер шрифта 16px. А нужному тексту и элементам задавать размер в rem. При уменьшении окна браузера с помощью медиа запросов уменьшать размер шрифта html, весь остальной текст будет уменьшаться в соответствии с размером шрифта для тега html. Вот, почитайте про относительные размеры https://learn.javascript.ru/css-units#%D0%B5%D0%B4...

Это rem калькулятор https://offroadcode.com/rem-calculator

https://jsfiddle.net/dn1uLka7/

Если я правильно понял задачу, то вы можете прописать так и фон будет подстраиваться под размер блока

background-position: center center;
  background-size: cover;

Вам надо при клике на блок добавлять к нему класс (например show-block) и потом проверять на его наличие.
как-то так
А для плавной анимации замените display на какой-нибудь вариант, из предложенных)

Transition не будет работать с display. Для плавной анимации нужно применять Visibility.

Используйте opacity. Пример

Пример

Вариантов несколько.
Например, убрать line-height у родительского контейнера или сделать изображения блочными элементами.

.box {
  width:100%;
  height:auto;
  vertical-align: top;
}