Współczynnik kształtu - CSS-Tricks

Właściwość CSS aspect-ratioumożliwia tworzenie ramek, które zachowują proporcjonalne wymiary, w których heighti widthpola są obliczane automatycznie jako współczynnik. To trochę matematyczne, ale chodzi o to, że możesz podzielić jedną wartość przez drugą na tej właściwości, a obliczona wartość zapewni, że pudełko pozostanie w tej proporcji.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratiojest zdefiniowany w specyfikacji CSS Box Sizing Module Level 4, która jest obecnie w wersji roboczej. Oznacza to, że nadal trwa i może się zmienić. Ale dzięki przeglądarkom Chrome i Firefox obsługującym tę funkcję za flagą eksperymentalną, a Safari Technology Preview dodającej jej obsługę na początku 2021 r., Istnieją silne sygnały, które aspect-ratiozyskują na popularności.

Składnia

aspect-ratio: auto || ;

Mówiąc prostym językiem: aspect-ratioalbo zakłada się, że autojest to ustawienie domyślne, albo przyjmuje jako wartość gdzie .

• Wartość początkowa: auto
• Dotyczy: wszystkich elementów oprócz pudełek inline i wewnętrznych rubinów lub pudełek stołowych
• Odziedziczone: nie
• Procenty: nie dotyczy
• Wartość obliczona: określone słowo kluczowe lub para liczb
• Typ animacji: dyskretna

Wartości

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Działa na treściach zastąpionych i niezastąpionych

Jeśli myślisz: „Hmm, tak, czy przeglądarka nie robi już tego za nas na obrazach?” odpowiedź brzmi: absolutnie . Przeglądarki wykonują fantazyjne obliczenia współczynnika proporcji dla zastępowanych treści, takich jak obrazy. Tak więc, jeśli obraz ma, powiedzmy, szerokość 500 pikseli, przeglądarka dostosowuje swoje algorytmy układu CSS, aby zachować wewnętrzne lub „naturalne” wymiary obrazu. aspect-ratioNieruchomość może być stosowany skutecznie zastąpić te naturalne wymiary.

Jednak niezastąpiona zawartość nie ma naturalnej proporcji. To większość rzeczy, z którymi pracujemy, na przykład div. Zamiast starać się zachować naturalne proporcje elementu, aspect-ratioustaw „preferowaną” wielkość.

Obecnie specyfikacja zauważa, że ​​starsze specyfikacje CSS, zwłaszcza CSS 2.1, nie zawierają wyraźnego rozróżnienia między zastąpioną i niezastąpioną zawartością. Oznacza to, że mogliśmy zobaczyć dodatkowe przypadki specjalne dodane do specyfikacji, aby je wyjaśnić. Na razie obserwujemy, jak przeglądarki wprowadzają obsługę osobnego ustawiania preferowanych proporcji dla zastąpionych i niezmienionych, gdzie niektóre przeglądarki z wczesnym wsparciem za flagą eksperymentalną mogą obsługiwać tylko aspect-rationiezastąpione treści. Zdecydowanie warto mieć oko na ewoluującą obsługę przeglądarek.

Działa samodzielnie bez określenia widthlubheight

Więc tak, możemy po prostu upuścić to na takim elemencie:

.element ( aspect-ratio: 16 / 9; )

… A domyślny element width: autouruchamia się niejawnie, aby ustawić wymiary elementu.

Zmienia się, gdy widthlub heightsą na tym samym elemencie

Powiedzmy, że mamy element o szerokości 300pxi aspect-ratioof 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Z natury aspect-ratiochce samodzielnie obliczyć wymiary elementu i zrobi to na podstawie kontekstu, w którym jest używany. Ale po widthwrzuceniu tego mówi współczynnik kształtu, aby obliczyć pole współczynnika proporcji elementu, używając 300pxjako szerokości. W rezultacie jest tak, jakbyśmy właśnie napisali:

.element ( height: 100px; width: 300px; )

To ma sens! Pamiętaj, że jeśli nie są określone widthlub nie heightsą określone, przeglądarka zakłada, że ​​są autoi przechodzi stamtąd. Kiedy podajemy wartości widthi heightwartości, są one używane.

W niektórych sytuacjach jest to ignorowane

To jest sytuacja, w której sprawy stają się nieco giętkie, ponieważ są przypadki, w których aspect-ratiojest przeoczane lub na obliczenia wpływają inne właściwości. To obejmuje:

Gdy oba widthi heightsą zadeklarowane w elemencie

Właśnie widziałem jak deklarowania albo widthczy heighton i elementem wpłynie na obliczenie aspect-ratio. Ale jeśli element ma już zarówno widtha height, jak i , zostaną one użyte zamiast aspect-ratio. Wymaga obu właściwości, aby nadpisać aspect-ratio; ustawienie samodzielnie heightlub widthsamodzielnie nie wpłynie na współczynnik proporcji elementu.

Robi senes, prawda? Jeśli użycie jednej z opcji widthlub heightwymusza aspect-ratioużycie tej wartości w obliczeniach, to logicznie wynika, że ​​użycie obu spowoduje całkowite zastąpienie, aspect-ratioponieważ obie wartości są już podane i ustawione.

Kiedy treść wychodzi poza stosunek

Mówiąc najprościej, jeśli masz element o współczynniku proporcji, a zawartość jest tak długa, że ​​wymusza rozszerzenie elementu, element zostanie rozszerzony. A jeśli element się rozszerzy, zmienią się jego wymiary, a tym samym nie będzie już proporcji. Dlatego specyfikacja mówi, że właściwość określa „preferowany” współczynnik proporcji. Jest to preferowane, ale nie przepisane.

Nie podoba ci się, jak to działa? Ustawienie min-height: 0;elementu pozwoli zawartości przepełnić preferowany współczynnik proporcji zamiast go rozszerzać.

Kiedy „traci” się min-*i max-*właściwości

Po prostu widzieliśmy, jak to działa, prawda? Gdy zawartość przekracza wymiary pudełka, w aspect-ratiorzeczywistości znika, ponieważ pudełko rozszerza się wraz z zawartością. Możemy to zmienić min-width: 0.

To dlatego, że wszystkie wymienione min-*i max-*właściwości typowo bitwa widthi heightdo supremacji w wojnie nad obliczeń Box modelu. Na przykład:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Ale:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Dzieje się tak, ponieważ min-widthalbo zapobiega widthzejściu poniżej określonej wartości, albo jest ignorowane, ponieważ widthustawił już element poza minimalną wymaganą szerokością. To samo odnosi się do min-height, max-widthi max-height.

Chodzi o to, że jeśli ustawimy obie właściwości a min-*lub max-*na tym samym elemencie co aspect-ratioi one „wygrywają” nad widthlub height, to one mają pierwszeństwo aspect-ratio. Mówiłem ci, że to trochę rozmyślające. ?

Wsparcie przeglądarki

TO ZNACZY	Brzeg	Firefox	Chrom	Safari	Opera
Nie	Nie	86 1.2,3	90 4	TP 5	Nie

Android Chrome	Android Firefox	Przeglądarka Android	iOS Safari	Opera Mobile
Nie	Nie	Nie	Nie	Nie

Więcej informacji

Artykuł z 1 lipca 2020 r

Pierwsze spojrzenie na „współczynnik proporcji”

Sara Cope