Articles
Wprowadzenie do CSS
`object-fit` i `object-position` właściwości

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

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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</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: 150px; 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.

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.

Jak Określić Wartości

object-position może określać pozycje za pomocą jednej, dwóch lub czterech wartości. Jednak określenie czterech wartości może nie być obsługiwane przez starsze przeglądarki.

Określanie jednej wartości

Jeśli została podana tylko jedna wartość, jest ona interpretowana jako pozycja pozioma (oś X), a pozycja pionowa (oś Y) jest automatycznie ustawiana na center.

  • Gdy zostanie użyte object-position: left;, obiekt jest pozycjonowany z lewej strony.
  • Gdy zostanie użyte object-position: 70%;, obiekt jest pozycjonowany na 70% szerokości i wyśrodkowany pionowo.
  • Gdy zostanie użyte object-position: 50px;, obiekt jest pozycjonowany 50px od lewej i wyśrodkowany pionowo.

Określanie dwóch wartości

Podanie dwóch wartości pozwala ustawić pozycje poziomą (oś X) i pionową (oś Y) oddzielnie.

  • Gdy zostanie użyte object-position: center center;, obiekt zostaje wyśrodkowany.
  • Gdy zostanie użyte object-position: right top;, obiekt jest pozycjonowany w prawym górnym rogu.
  • Gdy zostanie użyte object-position: 75% 20%;, obiekt jest pozycjonowany na 75% szerokości i 20% wysokości.
  • Gdy zostanie użyte object-position: 50px 25px;, obiekt jest pozycjonowany 50px od lewej i 25px od góry.

Określanie czterech wartości

Podając cztery wartości, można dokładniej ustawić położenie, używając słów kluczowych takich jak left czy top razem z przesunięciami.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Gdy zostanie użyte object-position: left 10px top 20px;, obiekt jest pozycjonowany 10px od lewej i 20px od góry.
  • Gdy zostanie użyte object-position: right 15% bottom 30px;, obiekt jest pozycjonowany 15% od prawej i 30px od dołu.
Format określenia wartości

object-position może przyjmować następujące formaty wartości.

  • Można podać słowa kluczowe takie jak top, right, bottom, left oraz center.
  • Można także określać wartości za pomocą procentów jak 50% lub jednostek takich jak px.

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: right bottom;
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

Możesz podać następujące wartości dla 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.

Na przykład, użycie object-fit: contain wyświetla cały obraz i pozycjonuje go według ustawienia object-position.

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

Przy tym ustawieniu obraz jest umieszczony po prawej stronie kontenera i 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ściWłaściwości CSS związane z przezroczystością