Nowa właściwość CSS, która pomaga zachować odstępy w układach elastycznych.
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:
object-fit. Zobacz prezentację na temat Codepen.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
padding-top możesz ustawić współczynnik proporcji 1:1 dla obrazów z podglądem postów w karuzeli.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
aspect-ratio do ustawiania współczynnika proporcji 1:1 dla obrazów z podglądem postów w karuzeli.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.