Właściwości CSS FIT-FIT & Obiekt pozycji obiektowej | Wyjaśnione

Oprócz stylizacji obrazów, filmów lub innej treści takiego typu pojawiającego się na stronach internetowych, wyznaczenie ich odpowiedniego dopasowania i pozycji jest bardzo ważne przy projektowaniu struktury strony internetowej. Niektóre właściwości zostały dostarczone w CSS, które pozwalają ci z łatwością wykonywać te zadania i tylko jeden wiersz kodu. Zaciągnęliśmy te właściwości poniżej.

1. Właściwość dopasowania obiektów
2. Właściwość pozycji obiektowej

Zanurzmy się w ich głębokości poniżej.

Właściwość dopasowania obiektów

W celu określenia, w jaki sposób wideo lub obraz pojawiający się na stronie internetowej zostanie zmieniony w celu dostosowania jego kontenera, używana jest właściwość obiektowa. Ta właściwość zasadniczo opisuje, w jaki sposób element będzie działał, gdy zmieni się rozmiar trzymającego pojemnika.

Składnia

Object-Fit: Brak | Wypełnij | Okładka | zawierać | skala | początkowe | dziedziczyć;

Wszystkie te parametry są wyjaśnione w poniższej tabeli.

Parametry	Opis
nic	Ta wartość nie zmienia zmiany treści.
wypełnić	Jest to wartość domyślna, która sprawi, że zawartość wypełni swój kontener albo poprzez rozciąganie lub ściskanie.
okładka	Służy do sprawienia, aby zawartość wypełniła kontener, zachowując jego proporcje.
zawierać	Służy również do uczynienia treści wypełniania pojemnika poprzez przycinanie przy jednoczesnym zachowaniu jego proporcji.
pomniejszyć	Ta wartość dziedziczy właściwości wartości Brak, albo zawiera wartość.
wstępny	Ta wartość ustawia właściwość na wartość domyślną.
dziedziczyć	Dziedziczy właściwość po swoim poprzedniku.

Znajdźmy właściwość obiektu dopasowanego za pomocą przykładów.

Przykład

Aby lepiej zrozumieć różne wartości właściwości obiektowej, najpierw osadzajmy obraz na naszej stronie internetowej za pomocą HTML.

Html

Tutaj dodaliśmy obraz w atrybucie SRC znacznika.

Wyjście

Obraz został osadzony na stronie internetowej.

Teraz zbadajmy różne parametry właściwości obiektu i zobaczmy, co one robią z obrazem powyżej.

Wypełnić

Tutaj ustawiliśmy pewną szerokość i wysokość obrazu, a właściwość obiektu została dostarczona wartość wypełnienia, która sprawi, że obraz będzie pasował do pojemnika przez ściskanie lub rozciąganie.

img
szerokość: 200px;
Wysokość: 300px;
Object-Fit: Fill;

Wyjście

Obraz został ściśnięty, aby wypełnić jego pojemnik.

Okładka

Wartość pokrycia właściwości obiektowej przeciął boki obrazów i zmieści ją wewnątrz pojemnika, utrzymując jego współczynnik kształtu.

img
szerokość: 200px;
Wysokość: 300px;
Object-Fit: Cover;

Wyjście

Parametr pokrycia działa poprawnie.

Zawierać

Oprócz nadania obrazu pewnej szerokości i wysokości ustawiliśmy właściwość obiektu, która zawiera, która przycina obraz w pojemniku, jednocześnie zachowując jego współczynnik proporcji.

img
szerokość: 200px;
Wysokość: 300px;
Object-fit: zawiera;
granica: 5px stały niebieski;

Wyjście

Obraz został pomyślnie obcięty.

Pomniejszyć

Parametr w skali właściwości obiektowej dziedziczy właściwości z parametru pokrycia lub parametru zawierającego.

img
szerokość: 200px;
Wysokość: 300px;
Object-Fit: Scale-Down;
granica: 5px stały niebieski;

Wyjście

Wartość skali działa poprawnie.

Właściwość pozycji obiektowej

Aby określić, w jaki sposób element (szczególnie obraz lub wideo) powinien być ustawiony wzdłuż wymiaru poziomego lub pionowego w jego pojemniku, używana jest właściwość pozycji obiektowej. Ta właściwość jest zawsze używana wraz z właściwością obiektową.

Składnia

Pozycja obiektu: pozycja | początkowe | dziedziczyć;

Parametr położenia opisuje pozycję obrazu lub wideo wzdłuż osi x i y. Może to być ciąg, taki jak lewy, prawy, środek lub liczba w pikselach lub procentach.

Aby uzyskać lepsze zrozumienie, oto przykład właściwości pozycji obiektu. Rozważamy obraz użyty w powyższych przykładach. W celu zdefiniowania jego pozycji wraz z tym, jak zostanie on rozmiar.

CSS

img
szerokość: 200px;
Wysokość: 300px;
Object-fit: zawiera;
pozycja obiektowa: 1% 90%;
granica: 5px stały niebieski;

W powyższym kodzie ustawiamy właściwość obiektu, która zawiera, co oznacza, że ​​obraz zostanie przycięty do kontenera przy jednoczesnym utrzymaniu jego proporcji. Tymczasem górne i lewe pozycje obrazu zostały przypisane 1%, podczas gdy dolne i prawe pozycje zostały przypisane 90%. Wreszcie, granica pojemnika podano 5px z solidnym niebieskim kolorem.

Wyjście

Właściwość pozycji obiektowej została pomyślnie zaimplementowana.

Wniosek

CSS zapewnia Właściwości dopasowania obiektów i pozycji obiektowej które pomagają ustawić wymiary obrazów. Właściwość FIT obiektu opisuje, w jaki sposób wideo lub obraz zostanie zmieniony w celu dostosowania jego pojemnika, tymczasem właściwość pozycji obiektowej określa, w jaki sposób element (szczególnie obraz lub wideo) powinien być ustawiony wzdłuż wymiaru poziomego lub pionowego w środku jego pojemnik. Obie te właściwości wraz z różnymi wartościami, które mogą renderować, zostały wykazane w tym poście za pomocą przykładów.