`object-fit` i `object-position` właściwości

Articles

Ten artykuł wyjaśnia właściwości object-fit i object-position.

Możesz nauczyć się, jak rozmieszczać obiekty, takie jak obrazy i filmy, oraz jak je zapisywać w CSS.

YouTube Video

HTML do podglądu

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Związane z dopasowaniem obiektu

Właściwość `object-fit`

Właściwość CSS object-fit jest używana głównie do kontrolowania, jak obrazy, filmy i inne treści pasują do swoich elementów kontenerowych. Korzystając z tej właściwości, możesz elastycznie określić, jak wybrane elementy są zmieniane rozmiarowo i jak estetycznie są pozycjonowane. Jest to bardzo przydatne do dostosowania wyświetlania obrazów lub filmów poprzez przycinanie lub skalowanie, gdy nie mieszczą się w elemencie nadrzędnym.

Wartości `object-fit`

`fill` (wartość domyślna)

1img {
2  object-fit: fill;
3}

fill jest wartością domyślną, w której obrazy lub filmy są wymuszanie rozciągane, aby całkowicie dopasować się do szerokości i wysokości elementu nadrzędnego. W tym przypadku oryginalne proporcje obrazu są ignorowane, co może powodować zniekształcenie obrazu.

Całkowicie dopasowuje się do rozmiaru elementu nadrzędnego.
Ponieważ proporcje są ignorowane, obrazy lub filmy mogą być rozciągnięte pionowo lub poziomo.

`contain`

1img {
2  object-fit: contain;
3}

contain zmienia rozmiar treści, tak aby całkowicie pasowała do elementu nadrzędnego, zachowując proporcje. Nie przekracza rozmiaru elementu nadrzędnego i może wystąpić dopełnienie po stronie pionowej lub poziomej.

Cała zawartość jest wyświetlana.
Aby zachować oryginalne proporcje, może pojawić się dopełnienie (efekt letterbox lub pillarbox).

`cover`

1img {
2  object-fit: cover;
3}

cover zmienia rozmiar treści, aby całkowicie pokryła element nadrzędny, zachowując proporcje. Niektóre treści mogą zostać przycięte, aby pasowały do elementu nadrzędnego, ale cały element wypełnia kontener, więc nie powstają żadne luki.

Treść całkowicie pokrywa element nadrzędny.
Może być przycięte przy zachowaniu oryginalnych proporcji.
Często używane dla obrazów tła lub obrazów w sekcji głównej.

`none`

1img {
2  object-fit: none;
3}

none wyświetla obrazy lub filmy w ich oryginalnym rozmiarze i proporcjach. Nie dostosowuje się do rozmiaru elementu nadrzędnego, a zawartość może wykraczać poza granice, jeśli to konieczne.

Oryginalny rozmiar zawartości jest zachowany.
Nie jest przeprowadzana zmiana rozmiaru w celu dopasowania zawartości do elementu nadrzędnego.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down to wartość, która łączy zachowanie none i contain. Jeśli zawartość mieści się w elemencie nadrzędnym, zachowuje się jak none, ale jeśli zawartość jest zbyt duża, stosuje zachowanie contain i jest skalowana, aby pasowała.

Zawartość jest skalowana w dół, jeśli jest większa od elementu nadrzędnego.
Wyświetlana jest w oryginalnym rozmiarze, jeśli jest mniejsza.

Przykładowe użycie

Dopasowanie obrazów tła do elementu nadrzędnego

Na przykład, aby rozciągnąć obraz na cały ekran z myślą o projektowaniu responsywnym, często używa się cover. Poniższy kod jest przykładem ciasnego dopasowania obrazu do elementu nadrzędnego, nawet jeśli zostanie on przycięty.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

W tym przypadku obraz całkowicie zakrywa element nadrzędny, zachowując estetyczny układ na każdym rozmiarze ekranu. Jeśli proporcje są inne, niektóre części obrazu mogą być niewidoczne, ale osiąga się prezentację dostosowaną do projektu.

Wyświetlanie obrazów przy zachowaniu proporcji

Następnie, jeśli chcesz dopasować cały obraz do elementu nadrzędnego przy zachowaniu proporcji, odpowiedni będzie contain.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

W tym przykładzie obraz jest skalowany w dół, aby pasował do kontenera, co skutkuje marginesami, ale oryginalny obraz jest wyświetlany bez zniekształceń.

Typowe błędy

Typowym błędem przy używaniu object-fit jest brak określenia rozmiaru elementu nadrzędnego. object-fit to właściwość dopasowująca zawartość do elementu nadrzędnego, więc jeśli rozmiar elementu nadrzędnego nie jest jasno określony, oczekiwany efekt nie może zostać osiągnięty. Upewnij się, że element nadrzędny ma odpowiednio ustawioną szerokość (width) lub wysokość (height).

Na przykład w poniższym kodzie wysokość elementu nadrzędnego nie jest określona, więc object-fit nie działa zgodnie z oczekiwaniami.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

W takim przypadku musisz określić wysokość elementu nadrzędnego lub dostosować cały układ za pomocą flexboxa lub układu gridowego.

Sytuacje, w których należy używać `object-fit`

object-fit jest ważny, szczególnie w projektowaniu responsywnym i na stronach internetowych obsługujących różne rozmiary ekranów. Na przykład, jest przydatny w następujących przypadkach:.

Kiedy chcesz dostosować obrazy lub filmy, aby poprawnie wyświetlały się na różnych urządzeniach
Kiedy chcesz wyświetlać obrazy tła lub podobne na pełnym ekranie z możliwością przycięcia
Kiedy chcesz dopasować obraz do elementu nadrzędnego, zachowując proporcje obrazu
Kiedy chcesz konsekwentnie wyświetlać rozmiary obrazów, na przykład w galeriach

Używanie object-fit w tych sytuacjach może utrzymać spójność projektu i poprawić doświadczenie użytkownika.

Podsumowanie

object-fit to potężna właściwość CSS, która pozwala elastycznie kontrolować sposób wyświetlania obrazów i filmów w odniesieniu do ich elementów nadrzędnych na stronie internetowej. Używając różnych wartości, takich jak fill, contain, cover, none i scale-down, możesz spełnić różne wymagania projektowe. Rozumiejąc, jak go prawidłowo używać i stosując odpowiednio, możesz osiągnąć atrakcyjne wizualnie układy.

Opanuj użycie object-fit, aby tworzyć responsywne i estetyczne projekty.

Właściwość `object-position`

Właściwość CSS object-position służy do kontrolowania pozycjonowania zawartości, takiej jak obrazy i filmy, w obrębie elementu. Używając object-position, możesz pozycjonować zawartość w określonych punktach i zapewniać efekty wizualne, które pasują do układu.

Przegląd `object-position`

object-position jest głównie stosowany do elementów multimedialnych, takich jak tagi <img> i <video>. Ta właściwość kontroluje, gdzie wewnątrz kontenera wyświetlane są multimedia. object-fit jest często używany w połączeniu z object-position, gdzie object-fit określa, jak obraz lub wideo dopasowuje się do rozmiaru ramki, a object-position dostosowuje pozycję wyświetlania zawartości.

1img {
2    object-fit: cover;
3    object-position: center;
4}

W tym przykładzie obraz jest skalowany, aby dopasować się do kontenera (object-fit: cover), i pozycjonowany tak, aby wyświetlana była jego środkowa część (object-position: center).

Jak Określić Wartości

object-position jest określany za pomocą dwóch wartości w następujący sposób.

Pozycja pozioma (oś X)
Pozycja pionowa (oś Y)

Format określenia wartości

W object-position możesz określić wartości w następującym formacie.

Słowa kluczowe: top, right, bottom, left, center
Procent: od 0% do 100%
Jednostki długości: px, em, rem, itp.

Na przykład możesz użyć tego w ten sposób.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

Połączenie słów kluczowych i procentów

Możliwe jest również mieszanie słów kluczowych i procentów.

1img {
2    object-position: right 50%;
3}

W tym przykładzie obraz jest umieszczony na prawym brzegu i pionowo wyśrodkowany na 50%. To połączenie jest bardzo przydatne, gdy potrzebne jest elastyczne pozycjonowanie.

Połączenie z `object-fit`

object-position jest często używane razem z object-fit. object-fit określa, jak obraz lub wideo jest skalowane w stosunku do ramki. Na przykład, używając object-fit: cover, obraz jest przycinany, aby pasował do ramki i jest pozycjonowany zgodnie z określonym object-position.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

W tym przykładzie obraz rozciąga się na cały kontener, wyświetlając prawy dolny fragment zawartości.

Przykłady w połączeniu z wartościami `object-fit`

fill: Obraz może być zniekształcony, ale wypełnia cały kontener.
contain: Cały obraz jest wyświetlany z zachowaniem proporcji.
cover: Przycięty, aby pasował do kontenera, z zachowaniem proporcji.
none: Obraz jest wyświetlany w swoim oryginalnym rozmiarze.

1img {
2    object-fit: contain;
3    object-position: top;
4}

W tym ustawieniu obraz jest umieszczony na górze kontenera, a cały obraz jest wyświetlany.

Zaawansowane użycie

object-position może być stosowane w różnych scenariuszach, nie tylko do prostych modyfikacji pozycjonowania, ale także w celu poprawy efektów wizualnych.

Podkreślanie części obrazu

Jest to przydatne, gdy chcesz skupić się na konkretnej części obrazu, zamiast wyświetlać cały obraz. Ustaw object-fit na cover i użyj object-position, aby skupić się na określonym obszarze.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

W tym przykładzie wyświetlana jest lewa dolna część obrazu, podkreślając istotne elementy.

Podczas używania wideo jako tła

object-position jest również przydatne podczas używania wideo jako tła. Możesz ustawić wideo w określonym miejscu, aby zachować spójność z ogólnym projektem strony.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

W tym ustawieniu wideo zajmuje całą stronę i jest umieszczone na środku u góry.

Typowe problemy i ich rozwiązania

Podczas używania object-position mogą wystąpić pewne problemy. Tutaj przedstawiamy typowe problemy oraz ich rozwiązania.

Część obrazu jest przycięta

Podczas używania object-fit: cover obraz może zostać przycięty, aby dopasować się do kontenera. W takim przypadku, dostosowując pozycję wyświetlania za pomocą object-position, możesz upewnić się, że ważne części są widoczne.

1img {
2    object-fit: cover;
3    object-position: center;
4}

Pozycja obrazu nie jest zgodna z oczekiwaniami

Określenie wartości procentowych może nie zawsze być intuicyjne. Konieczne jest uwzględnienie rozmiaru kontenera i proporcji obrazu oraz eksperymentowanie z różnymi wartościami. Używanie narzędzi deweloperskich do dostosowywania w czasie rzeczywistym jest skuteczne.

Podsumowanie

object-position jest potężnym narzędziem do swobodnego pozycjonowania elementów multimedialnych. Łącząc je z object-fit, można osiągnąć elastyczne układy dostosowane do projektu. Opanuj słowa kluczowe, wartości procentowe i jednostki długości, aby maksymalizować efekty wizualne w różnych sytuacjach.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

`overflow` i `contain` Właściwości

`object-fit` i `object-position` właściwości

YouTube Video

HTML do podglądu

Związane z dopasowaniem obiektu

Właściwość object-fit

Wartości object-fit

fill (wartość domyślna)

contain

cover

none

scale-down

Przykładowe użycie

Dopasowanie obrazów tła do elementu nadrzędnego

Wyświetlanie obrazów przy zachowaniu proporcji

Typowe błędy

Sytuacje, w których należy używać object-fit

Podsumowanie

Właściwość object-position

Przegląd object-position

Jak Określić Wartości

Format określenia wartości

Połączenie słów kluczowych i procentów

Połączenie z object-fit

Przykłady w połączeniu z wartościami object-fit

Zaawansowane użycie

Podkreślanie części obrazu

Podczas używania wideo jako tła

Typowe problemy i ich rozwiązania

Część obrazu jest przycięta

Pozycja obrazu nie jest zgodna z oczekiwaniami

Podsumowanie

YouTube Video

Właściwość `object-fit`

Wartości `object-fit`

`fill` (wartość domyślna)

`contain`

`cover`

`none`

`scale-down`

Sytuacje, w których należy używać `object-fit`

Właściwość `object-position`

Przegląd `object-position`

Połączenie z `object-fit`

Przykłady w połączeniu z wartościami `object-fit`