Właściwość współczynnika proporcji CSS

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

Una Kravets

Uwaga: Podsumowanie: zachowanie stałego stosunku szerokości do wysokości, zwanego współczynnikiem proporcji, ma kluczowe znaczenie w elastycznym projektowaniu witryn i zapobiega skumulowanemu przesunięciu układu. Teraz możesz to zrobić w prostszy sposób dzięki nowej właściwości aspect-ratio, która pojawi się w Chromium 88, Firefoksie 87 i Safari Technology Preview 118.

Format obrazu

Browser Support

• 88
• 88
• 89
• 15

Source

Format obrazu jest najczęściej wyrażany jako dwie liczby całkowite i dwukropek w wymiarach: szerokość:wysokość lub x:y. Najpopularniejsze formaty obrazu w fotografii to 4:3 i 3:2, a w przypadku filmów i nowszych aparatów konsumenckich jest to zwykle 16:9.

Dwa obrazy o tym samym formacie. Jeden ma wymiary 634 x 951 pikseli, a drugi – 200 x 300 pikseli. Oba mają format 2:3.

Wraz z rozwojem projektowania responsywnego zachowanie formatu obrazu stało się coraz ważniejsze dla programistów stron internetowych, zwłaszcza że wymiary obrazów i rozmiary elementów różnią się w zależności od dostępnego miejsca.

Oto kilka przykładów, w których zachowanie proporcji obrazu jest ważne:

• Tworzenie elastycznych elementów iframe, które zajmują 100% szerokości elementu nadrzędnego, a ich wysokość powinna zachowywać określony stosunek do widocznego obszaru.
• Tworzenie wewnętrznych kontenerów zastępczych dla obrazów, filmów i elementów do osadzenia, aby zapobiec ponownemu układaniu po załadowaniu elementów i zajęciu przez nie miejsca.
• Tworzenie jednolitej, elastycznej przestrzeni na interaktywne wizualizacje danych lub animacje SVG
• Tworzenie jednolitej, elastycznej przestrzeni dla komponentów wieloelementowych, takich jak karty czy daty w kalendarzu
• Tworzenie jednolitej, elastycznej przestrzeni dla wielu obrazów o różnych wymiarach (można używać w połączeniu z elementem object-fit)

Object-fit

Określenie proporcji pomaga nam dostosowywać rozmiar multimediów w kontekście responsywnym. Kolejnym narzędziem w tym zakresie jest właściwość object-fit, która umożliwia użytkownikom opisanie, jak obiekt (np. obraz) w bloku powinien wypełniać ten blok:

Wyświetlanie różnych wartości object-fit. Zobacz prezentację w CodePen.

Wartości initial i fill ponownie dostosowują obraz, aby wypełnić przestrzeń. W naszym przykładzie powoduje to rozciągnięcie i rozmycie obrazu, ponieważ piksele są ponownie dostosowywane. Nie jest to idealne rozwiązanie. object-fit: cover wykorzystuje najmniejszy wymiar obrazu, aby wypełnić przestrzeń, i przycina obraz, aby dopasować go do tego wymiaru. Przy najniższej wartości „powiększa” obraz. object-fit: contain zapewnia, że cały obraz jest zawsze widoczny, więc jest przeciwieństwem cover, gdzie przyjmuje rozmiar największej granicy (w naszym przykładzie powyżej jest to szerokość) i zmienia rozmiar obrazu, aby zachować jego naturalny współczynnik proporcji, dopasowując go do przestrzeni. W przypadku object-fit: none obraz jest przycięty na środku (domyślne położenie obiektu) i wyświetlany w naturalnym rozmiarze.

object-fit: cover zwykle sprawdza się w większości sytuacji, aby zapewnić jednolity interfejs podczas pracy z obrazami o różnych wymiarach, ale w ten sposób tracisz informacje (obraz jest przycinany na najdłuższych krawędziach).

Jeśli te szczegóły są ważne (np. w przypadku zdjęć produktów kosmetycznych na płaskiej powierzchni), przycinanie ważnych treści jest niedopuszczalne. Idealnym rozwiązaniem byłyby więc elastyczne obrazy o różnych rozmiarach, które pasują do obszaru interfejsu bez przycinania.

Stary sposób: zachowywanie formatu obrazu za pomocą znaku padding-top

Używanie padding-top do ustawiania współczynnika proporcji 1:1 w przypadku obrazów w podglądzie posta w karuzeli.

Aby zwiększyć ich elastyczność, możemy użyć formatu obrazu. Dzięki temu możemy ustawić określony rozmiar proporcji i oprzeć resztę multimediów na pojedynczej osi (wysokości lub szerokości).

Obecnie dobrze przyjęte rozwiązanie, które działa w różnych przeglądarkach i pozwala zachować współczynnik proporcji na podstawie szerokości obrazu, jest znane jako „Padding-Top Hack”. To rozwiązanie wymaga kontenera nadrzędnego i kontenera podrzędnego z pozycjonowaniem bezwzględnym. Następnie oblicz format obrazu jako wartość procentową, aby ustawić go jako padding-top. Na przykład:

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

Teraz, gdy znamy wartość współczynnika proporcji, możemy zastosować ją do kontenera nadrzędnego. Przyjrzyj się temu przykładowi:

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

Możemy wtedy napisać ten kod CSS:

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

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

Zachowanie formatu obrazu za pomocą aspect-ratio

Używanie aspect-ratio do ustawiania współczynnika proporcji 1:1 w przypadku obrazów w podglądzie posta w karuzeli.

Niestety obliczanie tych wartości padding-top nie jest zbyt intuicyjne i wymaga dodatkowych nakładów oraz pozycjonowania. Dzięki nowej wewnętrznej aspect-ratio właściwości CSS język służący do zachowywania proporcji jest znacznie bardziej przejrzysty.

Za pomocą tego samego znacznika możemy zastąpić padding-top: 56.25% wartością aspect-ratio: 16 / 9, ustawiając aspect-ratio na określony stosunek width / height.

Używanie padding-top

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

Korzystanie z formatu obrazu

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

Użycie aspect-ratio zamiast padding-top jest znacznie bardziej przejrzyste i nie powoduje zmiany właściwości dopełnienia w celu wykonania działania wykraczającego poza jej zwykły zakres.

Ta nowa właściwość umożliwia też ustawienie formatu obrazu na auto, gdzie „zastąpione elementy z wewnętrznym formatem obrazu używają tego formatu; w przeciwnym razie pole nie ma preferowanego formatu obrazu”. Jeśli jednocześnie określono zarówno auto, jak i <ratio>, preferowany współczynnik proporcji to określony współczynnik width podzielony przez height, chyba że jest to element zastąpiony z wewnętrznym współczynnikiem proporcji. W takim przypadku używany jest ten współczynnik proporcji.

Przykład: spójność w siatce

Działa to bardzo dobrze z mechanizmami układu CSS, takimi jak CSS Grid i Flexbox. Rozważmy listę z elementami podrzędnymi, które mają zachować współczynnik proporcji 1:1, np. siatkę ikon 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;
}

Obrazy w siatce z elementem nadrzędnym o różnych wymiarach formatu. Zobacz prezentację w Codepen

Przykład: zapobieganie przesunięciom układu

Kolejną zaletą aspect-ratio jest to, że może tworzyć miejsce na element zastępczy, aby zapobiegać skumulowanemu przesunięciu układu i zapewniać lepsze podstawowe wskaźniki internetowe. W tym pierwszym przykładzie wczytanie zasobu z interfejsu API, takiego jak Unsplash, powoduje przesunięcie układu po zakończeniu wczytywania multimediów.

Film przedstawiający skumulowane przesunięcie układu, które występuje, gdy w przypadku wczytanego komponentu nie jest ustawiony współczynnik proporcji. Ten film został nagrany w emulowanej sieci 3G.

Użycie elementu aspect-ratio tworzy natomiast element zastępczy, który zapobiega przesunięciu układu:

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

W przypadku wczytanego komponentu ustawiono film o określonym współczynniku proporcji. Ten film został nagrany w emulowanej sieci 3G. Zobacz prezentację w Codepen

Dodatkowa wskazówka: atrybuty obrazu dotyczące współczynnika proporcji

Innym sposobem ustawienia proporcji obrazu są atrybuty obrazu. Jeśli znasz wymiary obrazu z wyprzedzeniem, najlepiej ustawić je jako width i height.

W naszym przykładzie, gdy znamy wymiary obrazu (800 x 600 pikseli), znacznik obrazu będzie wyglądać tak: <img src="image.jpg" alt="..." width="800" height="600">. Jeśli przesłany obraz ma ten sam współczynnik proporcji, ale niekoniecznie te same wartości pikseli, możemy nadal używać wartości atrybutu obrazu do ustawiania współczynnika w połączeniu ze stylem width: 100%, aby obraz zajmował odpowiednie miejsce. Wszystko razem wyglądałoby tak:

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

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

W efekcie jest to takie samo jak ustawienie aspect-ratio na obrazie za pomocą CSS, a skumulowane przesunięcie układu jest unikane (zobacz wersję demonstracyjną na Codepen).

Podsumowanie

Dzięki nowej właściwości CSS aspect-ratio, która jest dostępna w wielu nowoczesnych przeglądarkach, zachowanie odpowiednich proporcji obrazu w kontenerach multimediów i układu staje się nieco prostsze.

Zdjęcia: Amy Shamblen i Lionel Gustave, Unsplash.