Nowa właściwość CSS współczynnika proporcji obsługiwana w Chromium, Safari Technology Preview i Firefox Nightly

Nowa właściwość CSS, która pomaga zachować odstępy w układach elastycznych.

Una Kravets

Format obrazu

Współczynnik proporcji jest najczęściej wyrażany jako dwie liczby całkowite i dwukropek w wymiarach: szerokość:wysokość lub x:y. Najczęściej używane formaty obrazu to 4:3 i 3:2. Filmy i nowsze modele mają zazwyczaj 16:9.

Wraz z nadejściem elastycznego projektowania stron utrzymanie współczynnika proporcji stało się coraz ważniejsze dla programistów stron internetowych, zwłaszcza ze względu na różnice między wymiarami obrazów i rozmiarami elementów w zależności od dostępnej przestrzeni.

Oto kilka przykładów, w których przypadku utrzymanie współczynnika proporcji może być ważne:

• Tworzenie elastycznych elementów iframe, w których mają 100% szerokości elementu nadrzędnego, a ich wysokość powinna pozostawić określony współczynnik widocznego obszaru
• Tworzenie wewnętrznych kontenerów zastępczych na potrzeby obrazów, filmów i elementów umieszczanych, aby zapobiec ponownemu układowi po wczytaniu i zajęciu miejsca.
• Tworzenie jednolitej, elastycznej przestrzeni na potrzeby interaktywnych wizualizacji danych lub animacji SVG
• Tworzenie jednolitej, elastycznej przestrzeni na komponenty wieloelementowe, takie jak karty czy daty kalendarza
• Tworzenie jednolitej, elastycznej przestrzeni na wiele obrazów o różnych wymiarach (można go użyć razem z parametrem object-fit)

Dopasowanie obiektu

Określenie współczynnika proporcji pomaga nam dostosowywać rozmiary multimediów w kontekście elastycznym. Innym narzędziem w tym zasobniku jest właściwość object-fit, która pozwala użytkownikom opisać, w jaki sposób obiekt (np. obraz) w bloku ma wypełnić ten blok:

Wartości initial i fill dostosowują obraz tak, aby wypełnił przestrzeń. W naszym przykładzie powoduje to ściśnięcie i rozmycie obrazu podczas zmiany pikseli. To nie jest idealne rozwiązanie. Funkcja object-fit: cover używa najmniejszych wymiarów obrazu, aby wypełnić przestrzeń, i przycina obraz, aby pasował do niego na podstawie tego wymiaru. „Powiększa” widok na najniższej granicy. Funkcja object-fit: contain zawsze dba o to, aby obraz był zawsze widoczny, dlatego jego przeciwieństwo to cover, czyli rozmiar największej granicy (w naszym przykładzie powyżej to szerokość), i zmienia rozmiar obrazu, aby zachować naturalny współczynnik proporcji i dopasować go do przestrzeni. W przypadku object-fit: none obraz jest przycięty w środku (domyślna pozycja obiektu) w naturalnym rozmiarze.

W większości przypadków object-fit: cover sprawdza się, by zapewnić ładny, jednolity interfejs w przypadku obrazów o różnych wymiarach, ale w ten sposób tracisz informacje (obraz jest przycięty wzdłuż najdłuższych krawędzi).

Jeśli te szczegóły są istotne (np. podczas pracy z płaskim zestawem kosmetyków), przycinanie ważnych treści jest niedozwolone. Najlepszy scenariusz to więc elastyczne obrazy o różnych rozmiarach, które pasują do interfejsu bez przycinania.

Dawny trik: zachowanie proporcji obrazu za pomocą padding-top

Aby te elementy były bardziej responsywne, możemy użyć formatu obrazu. Dzięki temu możemy ustawić określony rozmiar współczynnika proporcji i oprzeć resztę multimediów na pojedynczej osi (wysokość lub szerokość).

Dobrze akceptowane obecnie rozwiązanie działające w różnych przeglądarkach, które pozwala zachować współczynnik proporcji na podstawie szerokości obrazu, to tzw. „Padding-Top Hack”. To rozwiązanie wymaga kontenera nadrzędnego i absolutnie umieszczonego kontenera podrzędnego. Jeden z nich oblicza współczynnik proporcji jako wartość procentową, która ustawia się jako padding-top. Na przykład:

• Format obrazu 1:1 = 1 / 1 = 1 = padding-top: 100%
• Współczynnik proporcji 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Współczynnik proporcji 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Współczynnik proporcji 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Po określeniu wartości współczynnika proporcji możemy zastosować ją do kontenera nadrzędnego. Na przykład:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Moglibyśmy wtedy napisać taki kod CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Zachowywanie formatu obrazu w aspect-ratio

Obliczenie tych wartości padding-top nie jest zbyt intuicyjne i wymaga dodatkowego nakładu pracy. Dzięki nowej, nieodłącznej aspect-ratio właściwości CSS język umożliwiający utrzymanie współczynników proporcji jest znacznie bardziej jasny.

Tymi samymi znacznikami możemy zastąpić: padding-top: 56.25% elementem aspect-ratio: 16 / 9, ustawiając wartość aspect-ratio na określony współczynnik width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Użycie elementu aspect-ratio zamiast padding-top jest znacznie bardziej oczywiste i nie wymaga modernizacji właściwości dopełnienia, aby uzyskać działanie wykraczające poza zwykły zakres.

Ta nowa właściwość dodaje też możliwość ustawienia współczynnika proporcji na auto, gdzie „elementy zastąpione o wewnętrznym współczynniku proporcji korzystają z tego współczynnika. W przeciwnym razie pole nie ma preferowanego współczynnika proporcji”. Jeśli zarówno parametr auto, jak i <ratio> są określone razem, preferowany współczynnik proporcji to określony współczynnik width podzielony przez height, chyba że jest to element zastępczy o wewnętrznym współczynniku proporcji, w którym przypadku używany jest ten współczynnik.

Przykład: spójność w siatce

Świetnie działa to również z mechanizmami układu CSS, takimi jak CSS Grid i Flexbox. Zastanów się nad listą dzieci, w przypadku których chcesz zachować współczynnik proporcji 1:1, na przykład siatkę z ikonami sponsorów:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Przykład: zapobieganie przesunięciu układu

Kolejną świetną cechą aspect-ratio jest możliwość tworzenia przestrzeni zastępczej, która blokuje skumulowane przesunięcie układu i poprawia wskaźniki internetowe. W tym pierwszym przykładzie wczytanie zasobu z interfejsu API, np. Unsplash, powoduje przesunięcie układu po zakończeniu wczytywania multimediów.

Natomiast użycie elementu aspect-ratio spowoduje utworzenie zmiennej, która uniemożliwi to przesunięcie układu:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Dodatkowa wskazówka: atrybuty obrazu dla formatu obrazu

Innym sposobem na ustawienie formatu obrazu jest użycie atrybutów obrazu. Jeśli znasz wymiary obrazu z wyprzedzeniem, sprawdzoną metodą jest ustawienie ich jako width i height.

W powyższym przykładzie wymiary 800 x 600 pikseli będą wyglądać tak: <img src="image.jpg" alt="..." width="800" height="600">. Jeśli wysłany obraz ma ten sam współczynnik proporcji, ale niekoniecznie dokładne wartości w pikselach, nadal możemy użyć wartości atrybutów obrazu, aby ustawić współczynnik proporcji, w połączeniu ze stylem width: 100%, dzięki czemu obraz zajmie odpowiednią przestrzeń. Wszystko, co mogłoby wyglądać tak:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

Na koniec uzyskasz taki sam efekt jak ustawienie aspect-ratio na obrazie za pomocą CSS i unikniesz skumulowanego przesunięcia układu (zobacz prezentację w Codepen).

Podsumowanie

Dzięki nowej właściwości CSS aspect-ratio, która działa w wielu nowoczesnych przeglądarkach, zachowanie odpowiednich współczynników proporcji w kontenerach multimediów i układów jest nieco prostsze.

Zdjęcia: Amy Shamblen i Lionel Gustave w aplikacji Unsplash.