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

Uwaga: podsumowanie: zachowanie stałego proporcji szerokości do wysokości, nazywanego współczynnikiem proporcji, ma kluczowe znaczenie podczas projektowania elastycznych stron i zapobiega całkowitemu przesunięciu układu. Jest to łatwiejsze dzięki nowej właściwości aspect-ratio udostępnianej w Chromium 88, Firefoksie 87 i Safari Technology Preview 118.

Format obrazu

Obsługa przeglądarek

• 88
• 88
• 89
• 15

Źródło

Współczynnik proporcji jest najczęściej wyrażony jako 2 liczby całkowite i dwukropek w wymiarach: szerokość:wysokość lub x:y. Najpopularniejsze formaty obrazu to 4:3 i 3:2. a nowsze aparaty mają format 16:9.

Dwa obrazy o tym samym współczynniku proporcji. Jeden ma 634 × 951 pikseli, a drugi 200 × 300 pikseli. Oba mają format obrazu 2:3.

Wraz z pojawieniem się elastycznego projektowania stron zachowanie formatu obrazu zwłaszcza z uwagi na to, że wymiary obrazów różnią się od siebie, a rozmiary elementów zmieniają się w zależności kosmosu.

Oto kilka przykładów sytuacji, w których zachowanie formatu obrazu staje się ważne:

• tworzenie elastycznych elementów iframe, które mają 100% szerokości elementu nadrzędnego; wysokość powinna pozostać bez zmian. określony współczynnik widocznego obszaru
• tworzenie wewnętrznych kontenerów zastępczych dla obrazów, filmów i umieszczonych; aby zapobiec ponownemu układowi elementów, gdy się ładują i zajmują miejsce
• utworzenie jednolitej, elastycznej przestrzeni do interaktywnych wizualizacji danych lub animacji SVG.
• Utwórz jednolity, elastyczny obszar na komponenty wieloelementowe, takie jak karty czy daty kalendarzowe.
• Utworzenie jednolitej, elastycznej przestrzeni na wiele obrazów o różnych wymiarach (można stosować object-fit).

Dopasowane

Zdefiniowanie współczynnika proporcji pomaga nam dostosowywać rozmiar mediów w kontekście responsywności. Inne narzędzie zasobnik to właściwość object-fit, która umożliwia użytkownikom opisanie, jak obiekt (np. obraz) powinna wypełniać ten blok:

Prezentowanie różnych wartości object-fit. Zobacz prezentację dotyczącą Codepen.

Wartości initial i fill powodują ponowne dostosowanie obrazu, tak aby wypełnił przestrzeń. W naszym przykładzie pomniejszenie i rozmycie obrazu, ponieważ powoduje skorygowanie pikseli. Nie jest to idealne rozwiązanie. Zastosowania: object-fit: cover obrazu, tak aby wypełnił przestrzeń i przycinał obraz, by do niego pasował. . Powiększa obraz. do jego dolnej granicy. object-fit: contain zapewnia, że cały obraz jest zawsze widoczna, więc przeciwieństwem jest cover, gdzie przybiera rozmiar największej granicy (w tym przykładzie jest to szerokość) i zmienia rozmiar obrazu w celu zachowania jego wewnętrznego współczynnika proporcji i dopasowania do miejsca. Etui object-fit: none pokazuje obraz przycięty na środku (domyślna pozycja obiektu) w jego naturalnym rozmiarze.

object-fit: cover zwykle sprawdza się w większości przypadków, ponieważ zapewnia ujednolicony, jednolity interfejs z obrazami o różnych wymiarach, ale w ten sposób stracisz informacje (obraz zostanie przycięty jego najdłuższych krawędzi).

Jeśli te szczegóły są ważne (np. podczas pracy z płaską grupą kosmetyków), przycinanie ważnych treści jest niedozwolone. Idealny scenariusz to więc elastyczne obrazy różne rozmiary, które pasują do interfejsu użytkownika bez przycinania.

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

Użycie padding-top do ustawienia współczynnika proporcji 1:1 w obrazach podglądu posta w karuzeli.

Aby zwiększyć ich elastyczność, możemy użyć formatu obrazu. Dzięki temu możemy określić o określonych proporcjach i oparciu o resztę multimediów na osobnej osi (wysokość lub szerokość).

Obecnie powszechnie akceptowane rozwiązanie do stosowania w różnych przeglądarkach, które pozwala zachować współczynnik proporcji czyli w tzw. dopełnieniu. To rozwiązanie wymaga kontenera nadrzędnego i bezwzględnie umieszczony kontener podrzędny. Następnie trzeba obliczyć współczynnik proporcji jako wartość procentową, jak padding-top. Na przykład:

• Współczynnik proporcji 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%
• Format obrazu 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Teraz, gdy określiliśmy wartość współczynnika proporcji, możemy zastosować ją do kontenera nadrzędnego. Na przykład:

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

Możemy wtedy wpisać następujący kod CSS:

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

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

Zachowuję proporcje obrazu w formacie aspect-ratio

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

Obliczenie tych wartości padding-top nie jest zbyt intuicyjne i wymaga i pozycjonowania. Dzięki nowej, wbudowanej usłudze porównywania cen aspect-ratio , czyli języku utrzymywania aspektu jest znacznie bardziej zrozumiały.

Używając tych samych znaczników, możemy zastąpić ciąg padding-top: 56.25% elementem aspect-ratio: 16 / 9, ustawiając aspect-ratio do określonego współczynnika width / height.

Korzystanie z dopełnienia u góry

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

Korzystanie ze współczynnika proporcji

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

Użycie właściwości aspect-ratio zamiast padding-top jest znacznie bardziej przejrzyste i nie wymaga rewizji dopełnienia do wykonania działań wykraczających poza jej typowy zakres.

Nowa usługa zapewnia też możliwość ustaw współczynnik proporcji na auto, gdzie „zastąpione elementy o wewnętrznym współczynniku proporcji korzystają z tego formatu współczynnik; w przeciwnym razie pole nie ma preferowanego formatu obrazu”. Jeśli zarówno auto, jak i <ratio> to określony razem, preferowany współczynnik proporcji to określony współczynnik proporcji width podzielony przez wartość height, chyba że jest element zastąpiony przez Wewnętrzny współczynnik proporcji, który wtedy jest używany.

Przykład: spójność w siatce

Świetnie sprawdza się to również z mechanizmami układu CSS, takimi jak CSS Grid czy Flexbox. Rozważ listę z dziećmi, które chcesz zachować współczynnik proporcji 1:1, na przykład siatka 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 w różnych wymiarach. Zobacz demonstrację na stronie Codepen.

Przykład: zapobieganie przesunięciu układu

Inną wyjątkową zaletą elementu aspect-ratio jest to, że może on tworzyć przestrzeń zastępczą, aby zapobiegać Skumulowane przesunięcie układu i lepsze wskaźniki internetowe. W pierwszym okresie na przykład wczytanie zasobu z interfejsu API, takiego jak Unsplash, utworzy przesunięcia układu po zakończeniu wczytywania multimediów.

Film przedstawiający łączne przesunięcie układu, które ma miejsce, gdy w załadowanym zasobie nie ma ustawionego współczynnika proporcji. Ten film jest nagrywany przy użyciu emulowanej sieci 3G.

Zastosowanie elementu aspect-ratio tworzy natomiast obiekt zastępczy, który zapobiega takiemu przesunięciu układu:

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

.

, Film o ustalonym współczynniku proporcji jest ustawiany na wczytanym zasobie. Ten film jest nagrywany przy użyciu emulowanej sieci 3G. Zobacz demonstrację na stronie Codepen.

Wskazówka: atrybuty obrazu w współczynniku proporcji

Innym sposobem ustawienia współczynnika proporcji obrazu jest użycie atrybutów obrazu. Jeśli znasz wymiary obrazu z wyprzedzeniem, najlepszą metodą jest ustaw te wymiary jako width i height.

W naszym przykładzie, przy wymiarach 800 x 600 pikseli, znaczniki obrazu wyglądają tak: <img src="image.jpg" alt="..." width="800" height="600">. Jeśli wysłany obraz ma taki sam aspekt ale niekoniecznie dokładnie te liczby pikseli, możemy używać obrazów wartości atrybutów, aby ustawić współczynnik, w połączeniu ze stylem width: 100%, dzięki czemu że obraz zajmuje odpowiednią przestrzeń. Wszystko razem wyglądałoby w taki sposób:

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

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

Ostatecznie efekt będzie taki sam jak ustawienie parametru aspect-ratio na za pomocą CSS i uniknąć skumulowanego przesunięcia układu (zobacz demonstrację Codepen).

Podsumowanie

Dzięki nowej usłudze porównywania cen aspect-ratio, która działa w wielu nowoczesnych przeglądarkach, współczynniki proporcji w kontenerach multimediów i układów staną się nieco prostsze.

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