Głębokie zagłębienie się w dopasowanie obiektu i rozmiar tła w CSS

Nie zawsze jesteśmy w stanie załadować obrazy o różnych rozmiarach dla elementu HTML. Jeśli użyjemy szerokości i wysokości, które nie są proporcjonalne do proporcji obrazu, obraz może zostać skompresowany lub rozciągnięty. To nie jest dobre i można to rozwiązać za pomocą object-fit do elementu img lub za pomocą background-size .

Najpierw zdefiniujmy problem. Rozważmy następujący rysunek:

Dlaczego to się dzieje?

Obraz będzie miał proporcje, a przeglądarka wypełni pole zawierające ten obraz. Jeśli proporcje obrazu są inne niż określone dla niego szerokość i wysokość, wynikiem będzie ściśnięty lub rozciągnięty obraz.

Widzimy to na poniższym rysunku:

Rozwiązanie

Nie zawsze musimy dodawać obraz o innym rozmiarze, gdy proporcje obrazu nie są zgodne z szerokością i wysokością elementu zawierającego. Zanim zagłębimy się w rozwiązania CSS, chcę pokazać, jak robiliśmy to w aplikacjach do edycji zdjęć:

Teraz, kiedy rozumiemy, jak to działa, przyjrzyjmy się, jak to działa w przeglądarce. ( Uwaga, spoiler: to prostsze! )

object-fit CSS

Właściwość object-fit obiektu określa, w jaki sposób zawartość zastępowanego elementu, takiego jak img lub video , powinna zostać zmieniona, aby zmieściła się w jego pojemniku. Domyślną wartością object-fit jest fill , co może skutkować ściśnięciem lub rozciągnięciem obrazu.

Przyjrzyjmy się możliwym wartościom.

Możliwe wartości object-fit

object-fit: contain

W takim przypadku rozmiar obrazu zostanie zmieniony, aby pasował do proporcji jego kontenera. Jeśli proporcje obrazu nie zgadzają się z formatem kontenera, zostanie on umieszczony w formacie letterbox.

object-fit: cover

W tym przypadku obraz zostanie również zmieniony, aby pasował do proporcji jego kontenera, a jeśli proporcje obrazu nie pasują do formatu kontenera, zostanie on przycięty w celu dopasowania.

object-fit: fill

Dzięki temu rozmiar obrazu zostanie zmieniony, aby pasował do proporcji jego kontenera, a jeśli proporcje obrazu nie pasują do formatu kontenera, zostanie ściśnięty lub rozciągnięty. Nie chcemy tego.

object-fit: none

W takim przypadku obraz w ogóle nie zostanie zmieniony, ani rozciągnięty, ani ściśnięty. Działa jak wartość cover , ale nie uwzględnia proporcji kontenera.

Oprócz object-fit mamy również właściwość object-position , która odpowiada za pozycjonowanie obrazu w jego kontenerze.

Możliwe wartości dla object-position

Właściwość object-position działa podobnie do właściwości background-position w CSS:

Słowa kluczowe na top i na bottom działają również wtedy, gdy proporcje pola zawierającego są większe w pionie:

CSS background-size

W przypadku background-size , pierwszą różnicą jest to, że mamy do czynienia z tłem, a nie elementem HTML ( img ).

Możliwe wartości dla background-size

Możliwe wartości dla background-size to auto , contain i cover .

background-size: auto

W przypadku auto obraz pozostanie w swoim domyślnym rozmiarze:

background-size: cover

W tym przypadku obraz zostanie zmieniony, aby zmieścił się w kontenerze. Jeśli proporcje nie są takie same, obraz zostanie zamaskowany w celu dopasowania.

background-size: contain

W takim przypadku rozmiar obrazu zostanie zmieniony, aby zmieścił się w kontenerze. Jeśli współczynniki kształtu są wyłączone, obraz zostanie oznaczony jako letterbox, jak pokazano w następnym przykładzie:

Jeśli chodzi o background-position , jest to podobne do działania object-position . Jedyna różnica polega na tym, że domyślna pozycja object-position jest inna niż background-position .

Kiedy nie używać object-fit lub rozmiaru background-size

Jeśli element lub obraz ma ustaloną wysokość i ma do niego nałożoną opcję background-size: cover lub object-fit: cover , pojawi się punkt, w którym obraz będzie zbyt szeroki, tracąc w ten sposób ważne szczegóły, które mogą wpłynąć na sposób użytkownik postrzega obraz.

Rozważmy następujący przykład, w którym obrazowi nadano stałą wysokość:

 .card__thumb { height: 220px; }

Jeśli pojemnik na kartę jest zbyt szeroki, spowoduje to wyświetlenie tego, co widzimy po prawej stronie (obraz, który jest zbyt szeroki). To dlatego, że nie określamy proporcji.

Jest tylko jedna z dwóch poprawek. Pierwszym z nich jest użycie padding hack do stworzenia wewnętrznego współczynnika.

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

Drugą poprawką jest użycie nowej właściwości CSS aspect-ratio . Za jego pomocą możemy wykonać następujące czynności:

 .card__thumb img { aspect-ratio: 4 / 3; }

Uwaga : opisałem już szczegółowo właściwość aspect-ratio na wypadek, gdybyś chciał się o niej dowiedzieć: „Poznajmy współczynnik proporcji w CSS”.

Przypadki użycia i przykłady

Awatary użytkownika

Idealny przypadek użycia dla object-fit: cover to awatary użytkowników. Współczynnik proporcji dozwolony dla awatara jest często kwadratowy. Umieszczenie obrazu w kwadratowym pojemniku może zniekształcić obraz.

 .c-avatar { object-fit: cover; }

Lista logo

Lista klientów firmy jest ważna. W tym celu często będziemy używać logo. Ponieważ logotypy będą miały różne rozmiary, potrzebujemy sposobu na zmianę ich rozmiaru bez ich zniekształcania.

Na szczęście object-fit: contain to dobre rozwiązanie.

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

Miniatura artykułu

To bardzo powszechny przypadek użycia. Kontener na miniaturę artykułu może nie zawsze zawierać obraz o tych samych proporcjach. Ten problem powinien zostać rozwiązany w pierwszej kolejności przez system zarządzania treścią (CMS), ale nie zawsze tak jest.

 .article__thumb { object-fit: cover; }

Tło bohatera

W takim przypadku decyzja, czy użyć elementu img , czy tła CSS, będzie zależeć od następujących czynników:

• Czy wizerunek jest ważny? Jeśli CSS jest z jakiegoś powodu wyłączony, czy chcielibyśmy, aby użytkownik zobaczył obraz?
• A może cel obrazu jest jedynie dekoracyjny?

Na podstawie naszej odpowiedzi możemy zdecydować, której funkcji użyć. Jeśli obraz jest ważny :

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

Jeśli obrazek jest dekoracyjny , możemy wybrać background-image :

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

CSS jest w tym przypadku krótszy. Upewnij się, że każdy tekst umieszczony nad obrazem jest czytelny i dostępny.

Dodawanie tła do obrazu z object-fit: contain

Czy wiesz, że możesz dodać kolor tła do img ? Skorzystalibyśmy z tego, używając również object-fit: contain .

W poniższym przykładzie mamy siatkę obrazów. Gdy proporcje obrazu i kontenera są różne, pojawi się kolor tła.

 img { object-fit: contain; background-color: #def4fd; }

Element wideo

Czy kiedykolwiek potrzebowałeś video jako tła? Jeśli tak, to prawdopodobnie chciałeś, aby zajmował całą szerokość i wysokość swojego rodzica.

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

Aby w pełni pokrył szerokość i wysokość swojego rodzica, musimy nadpisać domyślną wartość object-fit :

 .hero__video { /* other styles */ object-fit: cover; }

Wniosek

Jak widzieliśmy, zarówno object-fit , jak i background-size są bardzo przydatne do obsługi różnych współczynników proporcji obrazu. Nie zawsze będziemy mieć kontrolę nad ustawieniem idealnych wymiarów dla każdego obrazu i właśnie tam błyszczą te dwie funkcje CSS.

Przyjazne przypomnienie o implikacjach dostępności wyboru między elementem img a tłem CSS: Jeśli obraz jest czysto dekoracyjny, wybierz tło CSS. W przeciwnym img bardziej odpowiedni jest obraz.

Mam nadzieję, że ten artykuł okazał się przydatny. Dziękuję za przeczytanie.