CSS aspect-ratio i object-fit z wyborem punktu ostrości
Przewodnik po CSS aspect-ratio i object-fit
CSS aspect-ratio i object-fit: demonstracje na żywo i Tailwind | We.Inc
Zablokuj proporcje pola przez aspect-ratio, a potem dopasuj w nim zdjęcia przez object-fit cover, contain, fill, none lub scale-down. Kliknij, aby ustawić punkt ostrości przez object-position.
Dwie właściwości rozwiązują większość problemów z rozmiarem obrazków. aspect-ratio: 16 / 9 sprawia, że pole zachowuje ten kształt przy każdej szerokości, zastępując stary hack z padding-top. object-fit decyduje, jak img lub video wypełnia to pole: cover przycina, contain dodaje pasy, fill rozciąga. object-position wybiera, która część pozostaje widoczna, gdy cover przycina.
Szybka ściąga
Cel
CSS
Tailwind
Kwadratowe pole
aspect-ratio: 1
Kształt wideo
aspect-ratio: 16 / 9
Dowolne proporcje
aspect-ratio: 4 / 3
aspect-4/3 lub aspect-[4/3]
Wypełnij i przytnij
object-fit: cover
Pokaż całość
object-fit: contain
Zachowaj górę
object-position: top
Poniżej jedno testowe zdjęcie siedzi w polu, którego kształt możesz zmieniać. Przełączaj między pięcioma wartościami object-fit, klikaj zdjęcie, aby przesunąć punkt ostrości, i kopiuj CSS lub klasy Tailwind. Niżej: padding hack obok aspect-ratio, responsywne osadzenia wideo i siatki kart z równymi miniaturami.
Wybierz proporcje pola i wartość object-fit. Podgląd pokazuje dokładnie, co przeglądarka przytnie lub rozciągnie.
Przy wybranym cover lub none kliknij w dowolnym miejscu testowego zdjęcia, aby ustawić tam object-position.
Skopiuj wygenerowany CSS albo klasy Tailwind, które robią to samo.
Korzystaj z przepisów na siatkę kart i wideo poniżej, gdy budujesz prawdziwe układy.
Zawsze dodawaj atrybuty width i height do znaczników img. Przeglądarki zamieniają je na proporcje, zanim plik się wczyta, więc układ nie skacze.
Wybieraj cover dla miniatur i zdjęć w sekcji hero, a contain dla logo i zdjęć produktów, w których nic nie może zostać ucięte.
Jeśli twarz ciągle wypada z kadru, przesuń object-position w jej stronę zamiast ponownie przycinać plik.
aspect-ratio to preferowany kształt, a nie klatka. Długi tekst w polu je wydłuża, chyba że ustawisz min-height: 0 lub overflow.
Najczęściej zadawane pytania
Czym różni się aspect-ratio od object-fit?
aspect-ratio nadaje kształt samemu polu, dla dowolnego elementu. object-fit dotyczy tylko treści zastępowanej, takiej jak img, video i canvas, i decyduje, jak ta treść jest rysowana w swoim polu. Zwykle używasz obu: aspect-ratio na obrazku, aby ustalić jego kształt, i object-fit: cover, aby zdjęcie go wypełniło.
Dlaczego object-fit nic nie robi?
Pole obrazka ma te same proporcje co zdjęcie, więc nie ma czego przycinać ani rozciągać. object-fit pokazuje różnicę dopiero, gdy pole ma inny kształt, na przykład stałą wysokość plus width: 100% albo aspect-ratio inne niż w pliku.
Czy nadal potrzebuję hacka z padding-top?
Nie w obecnych przeglądarkach. aspect-ratio działa w Chrome, Edge, Firefoksie i Safari od 2021. Zostaw hack tylko wtedy, gdy musisz wspierać starsze przeglądarki, i sprawdź caniuse dla swoich odbiorców.
Czy object-fit działa na obrazkach tła?
Nie. Dla teł CSS odpowiednikami są background-size: cover lub contain oraz background-position dla punktu ostrości. object-fit jest dla prawdziwych elementów img i video, które lepiej nadają się do obrazków z treścią, bo niosą tekst alt i obsługują srcset.
Czy aspect-ratio można użyć na div?
Tak. Może go przyjąć każdy element. div z width: 100% i aspect-ratio: 1 staje się kwadratem rosnącym razem z kolumną, co przydaje się przy miejscach na mapy, awatarach i szkieletowych loaderach.
Jak przeglądarka rozwiązuje aspect-ratio
Proporcje działają tylko wtedy, gdy jeden wymiar jest automatyczny. Ustaw szerokość i zostaw wysokość jako auto, a przeglądarka obliczy wysokość z proporcji. Ustaw i szerokość, i wysokość, a proporcje zostaną zignorowane, bo nie ma już czego obliczać.
Wartość auto 3 / 2 oznacza: użyj naturalnych proporcji elementu, jeśli je ma, na przykład wczytanego obrazka, a przed wczytaniem lub gdy ich nie ma, wróć do 3 / 2. Dokładnie tak za kulisami zachowują się atrybuty width i height na img.
Wybór punktu ostrości
object-position przyjmuje te same wartości co background-position: słowa kluczowe, takie jak top czy right, procenty lub długości. 50% 50% to wartość domyślna, która zachowuje środek. Procent wyrównuje ten punkt obrazka z tym samym punktem pola, więc 30% 40% zachowuje obszar w jednej trzeciej od lewej i nieco powyżej środka.
W systemie treści zapisuj punkt ostrości każdego obrazka jako dwa procenty i wpisuj go do stylu inline. Wtedy każde przycięcie na stronie utrzymuje obiekt w kadrze, niezależnie od proporcji użytych w układzie.
aspect-ratio obok padding hacka
Przed aspect-ratio pole dostawało kształt z padding-top podanego w procentach, bo procenty pionowego paddingu liczone są względem szerokości. To działa, ale treść w środku musi być pozycjonowana absolutnie. Oba pola poniżej mają 16:9.
Stare i nowe, ten sam efekt
56.25% to 9 podzielone przez 16. Nowoczesna wersja potrzebuje jednej linii i pozwala treści płynąć normalnie.
Wszystkie pięć wartości object-fit na tym samym zdjęciu
Zdjęcie ma 3:2, a każde pole jest kwadratowe, więc każda wartość musi poradzić sobie z niedopasowaniem i różnice są wyraźnie widoczne.
Wartości object-fit
Wartość
Co się dzieje
Tailwind
Rozciąga obrazek do pola. Domyślne dla img i video. Zniekształca, gdy proporcje się różnią.
Skaluje cały obrazek tak, by zmieścił się w polu. Zostawia puste pasy (letterboxing), gdy proporcje się różnią.
Skaluje obrazek tak, by wypełnił pole, i przycina nadmiar. Bez zniekształceń i pasów, ale część zdjęcia jest ucięta.
Zachowuje naturalny rozmiar obrazka i przycina wszystko, co się nie mieści. Dobre do pokazania detalu w skali 1:1.
Działa jak none lub contain, zależnie od tego, co daje mniejszy wynik. Nigdy nie powiększa małego obrazka.
fill, contain, cover, none, scale-down
To samo zdjęcie 300 na 200 w pięciu kwadratach po 110 pikseli. Obserwuj czerwoną kropkę: to obiekt, którego cover nie może zgubić.
Responsywne wideo i osadzenia
iframe w stylu YouTube, który zachowuje 16:9
Nadaj iframe szerokość 100% i aspect-ratio. Nie trzeba otaczającego diva ani pozycjonowania absolutnego.
Siatki kart z równymi miniaturami
Każda miniatura w tym samym kształcie
Przesyłane pliki mają różne kształty. aspect-ratio plus object-fit: cover porządkuje siatkę bez edycji choćby jednego pliku.