Nadawanie stylów CSS dla klas

Witam, mam problem z nadawaniem wartości dla klas w CSS.

Mam bootstrapa i chce zrobić portfolio i mam problem ze zrobieniem ogólnego widoku, chodzi mi o zrobienie kwadratów z podglądem po kliknięciu. No to szerokość ładnie się ustawia itd. ale wysokość musi się zmieniać na taką jaką ma szerokość no to funkcja ładnie działa którą zrobiłem i dobrze przypisuje wysokość. Problem w tym jak zmieniać domyślną wartość w CSS dla klasy.

szybka amatorka np.:
CSS
.praca {
width:20%;
float:left;
height: 100px; //przykladowa wartosc wysokosci domyslnej, nie musi jej byc
}

javascript
height = document.getElementById().style.width;

no można powiedzieć że coś takiego na sprawdzenie szerokości jest i nadawanie jej wysokości.
teraz tylko brakuje jak zmienić wartość wysokości w CSS dla klasy w moim przypadku .praca i żeby się przypisało to dla każdej klasy.

Jeśli niezrozumiałe to postaram się prościej napisać.

Naprawdę potrzebujesz do tego javascript?

.square {
    background: orange;
    width: 20%;
    padding-top: 20%;
}

https://jsfiddle.net/94j4p4n1/1/
lub z viewport units

.square {
    background: pink;
    width: 20vw;
    height: 20vw;
}

https://jsfiddle.net/sachb152/

ale szerokość zmienia się bo z bootstrapa korzystam, raz jest 1 kolumna, potem 2,4,6 to inna wartość szerokości jest.

Możesz w js dodać do DOM element style, a w jego innerText style tej klasy. Gdy chcesz zmienić, podmieniaj ten innerText. Ładne to IMHO nie jest, ale działa.

Zobaczę, dzięki za pomoc.