Kawałek Kodu

Dziś mała pożywka dla szukających proporcji w otaczającym świecie. Może aż tak daleko nie będziemy się rozglądać, ale na pewno obadamy dokładnie ekran komputera. Opowiem Ci o metodach na utrzymywanie proporcji elementów. Jeśli jeden wymiar ma wartość X, chcemy aby drugi był np.: 2 razy większy lub 3 razy mniejszy. Co więcej, chcemy aby element pozostawał w zadanej proporcji, jeśli jeden z wymiarów zmieni się.

Jak zmusić element aby zawsze miał rację?

Mamy do dyspozycji kilka metod. Omówię oparte tylko i wyłącznie o CSS i HTML. Metody w JavaScript pozostawimy dla.... dla innych.

Pierwsza z metod opiera się o właściwość padding-top. Tu ku zaskoczeniu padding o wartości procentowej zależny jest od szerokości elementu. Również padding-top i padding-bottom. Jeśli więc dla naszego elementu ustawimy padding-top dwa razy większy niż szerokość, to element będzie mieć proporcje 1:2.
Tu dosyć ciekawa rzecz warta wspomnienia. Jeśli nasz element masz szerokość 100%, to padding-top w przypadku proporcji 1:2 będzie mieć wartość 200%. Ale jeśli element ma 50% szerokości, to padding-top będzie mieć wartość 100%. Czyli padding-top ustawiamy na wartość właściwości width pomnożoną przez zadaną proporcję.

<div></div>

+

body {
  margin: 0;
  overflow: hidden;
}

div {
  width: 25%; /* 25% szerokości ekranu */
  height: 0; /* nie chcemy height, wysokość elementu utworzy padding-top */
  padding-top: 50%; /* 2*25%=50% - proporcja 1:2 */
  background: #f00;
  border: 1px solid #000;
  box-sizing: border-box;
}

Tak wygląda aspect ratio z wykorzystaniem padding-top (pobaw się rozmiarem okna przeglądarki).

Przykładowe wartości padding-top dla popularnych proprocji, przy założeniu width:100%:

ratio padding-top
16:9 56,25% (9/16*100)
4:3 75%
3:2 66,66%
5:4 80%
16:10 62,5%

Jaka jest druga metoda zmuszania?

Wykorzystuje ona obrazek. Obrazek oczywiście musi mieć proporcje, które chcemy nadać elementowi. Aby obrazek wizualnie nie przeszkadzał, tworzymy przezroczysty GIF lub PNG. Dla wspomnianej proporcji wystarczy obrazek o wymiarach 1x2px. 

Wykorzystamy PNG inline:

<div>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAQAAAAziH6sAAAADklEQVR42mNkYGBkYAAAAA8AA7qm8EcAAAAASUVORK5CYII=">
</div>

+

body {
  margin: 0;
  overflow: hidden;
}

div {
  width: 25%; /* 25% szerokości ekranu, tu już nie ustawiamy height i padding-top */
  background: #f00;
  border: 1px solid #000;
  box-sizing: border-box;
}

div img {
  width: 100%; /* obrazek ma wypełniać rodzica */
  height: auto; /* i automatycznie dopasować wysokość zachowując swoje proporcje */
}

Efekt - identyczny jak poprzedni. Tak wygląda aspect ratio z wykorzystaniem obrazka.

Są trzy racje!

Ta metoda jest podobna do poprzedniej, lecz wykorzystuje element SVG. Wykorzystuje to chyba zbyt mocne słowo, ledwie dotkniemy SVG. Ten tag posiada atrybut viewBox, który określa jaki wycinek z obszaru SVG będziemy pokazywać (defniniuje tzw. viewport). Skoro to prostokątny wycinek, to posiada oczywiście...proporcje!

<div>
 <svg viewBox="0 0 1 2"></svg>
</div>
body{
 margin:0;
 overflow:hidden;
}
div{
 width:25%;
 background:#f00;
 border:1px solid #000;
 box-sizing:border-box;
}
div svg{
 display:block;
}

I SVG w działaniu: aspect ratio z wykorzystaniem SVG.

W przypadku dwóch ostatnich metod możliwe jest również ustalenie aspect ratio w zależności od wysokości. Jak to zrobić i jakie zaskakujące wydarzenia nas czekają, o tym w drugiej części. Masz rację! Wpadnij!

 

Przydatne linki:
Właściwość padding-top w CSS
Generator online PNG o zadanych wymiarach