Proprietà `object-fit` e `object-position`

Articles

Questo articolo spiega le proprietà object-fit e object-position.

Puoi imparare come disporre oggetti come immagini e video e come scriverli in CSS.

YouTube Video

HTML per Anteprima

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>

Relativo al posizionamento degli oggetti

Proprietà `object-fit`

La proprietà CSS object-fit viene utilizzata principalmente per controllare come immagini, video e altri contenuti si adattano agli elementi contenitore. Utilizzando questa proprietà, puoi specificare in modo flessibile come gli elementi specificati vengono ridimensionati e posizionati esteticamente. È molto utile per regolare la visualizzazione di immagini o video ritagliandoli o ridimensionandoli quando non si adattano all'elemento genitore.

Valori di `object-fit`

`fill` (Valore predefinito)

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

fill è il valore predefinito, in cui immagini o video vengono allungati forzatamente per adattarsi completamente alla larghezza e all'altezza dell'elemento genitore. In questo caso, il rapporto di aspetto originale viene ignorato, il che può causare distorsioni dell'immagine.

Si adatta completamente alla dimensione dell'elemento genitore.
Poiché il rapporto di aspetto viene ignorato, le immagini o i video possono essere allungati verticalmente o orizzontalmente.

`contain`

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

contain ridimensiona il contenuto in modo che si adatti completamente all'interno dell'elemento genitore, mantenendo il rapporto di aspetto. Non supera la dimensione dell'elemento genitore e può esserci un padding sul lato verticale o orizzontale.

L'intero contenuto viene visualizzato.
Per mantenere il rapporto di aspetto originale, potrebbe apparire del padding (effetto letterbox o pillarbox).

`cover`

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

cover ridimensiona il contenuto per coprire completamente l'elemento genitore mantenendo il rapporto di aspetto. Alcuni contenuti possono essere ritagliati per adattarsi all'elemento genitore, ma l'intero elemento riempie il contenitore, quindi non si verificano spazi vuoti.

Il contenuto copre completamente l'elemento genitore.
Può essere ritagliato mantenendo il rapporto d'aspetto originale.
Comunemente usato per immagini di sfondo o immagini nella sezione principale.

`none`

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

none visualizza immagini o video nelle loro dimensioni originali e con il rapporto d'aspetto originale. Non si adatta alle dimensioni dell'elemento genitore e il contenuto può debordare, se necessario.

Le dimensioni originali del contenuto sono mantenute.
Non viene effettuato alcun ridimensionamento per adattare il contenuto all'elemento genitore.

`scale-down`

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

scale-down è un valore che combina il comportamento di none e contain. Se il contenuto si adatta all'elemento genitore, si comporta come none, ma se il contenuto è troppo grande, applica il comportamento di contain e viene ridimensionato per adattarsi.

Il contenuto viene ridimensionato se è più grande dell'elemento genitore.
Viene visualizzato nella sua dimensione originale se è più piccolo.

Esempio di utilizzo

Adattare le immagini di sfondo all'elemento genitore

Ad esempio, per estendere un'immagine su tutto lo schermo tenendo conto del design reattivo, è comune usare cover. Il seguente codice è un esempio di adattamento di un'immagine strettamente all'elemento genitore, anche se viene ritagliata.

 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>

In questo caso, l'immagine copre completamente l'elemento genitore, mantenendo un layout gradevole su qualsiasi dimensione dello schermo. Se il rapporto d'aspetto è diverso, alcune parti dell'immagine potrebbero non essere visibili, ma si ottiene una presentazione adatta al design.

Visualizzare immagini mantenendo il rapporto d'aspetto

Successivamente, se vuoi adattare l'intera immagine all'elemento genitore mantenendo il suo rapporto d'aspetto, contain è adatto.

 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>

In questo esempio, l'immagine viene ridimensionata per adattarsi al contenitore, creando del padding, ma l'immagine originale viene visualizzata senza distorsioni.

Errori comuni

Un errore comune quando si utilizza object-fit è non impostare le dimensioni dell'elemento genitore. object-fit è una proprietà per adattare il contenuto all'elemento genitore, quindi se le dimensioni dell'elemento genitore non sono definite chiaramente, l'effetto desiderato non può essere ottenuto. Assicurati che l'elemento genitore abbia width o height impostati correttamente.

Ad esempio, nel seguente codice, l'altezza dell'elemento genitore non è specificata, quindi object-fit non funziona come previsto.

 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>

In questo caso, devi specificare l'altezza dell'elemento genitore o regolare l'intero layout utilizzando flexbox o layout a griglia.

Situazioni in cui utilizzare `object-fit`

object-fit è importante, soprattutto nel design responsivo e nei siti web che si adattano a diverse dimensioni dello schermo. Ad esempio, è utile nei seguenti casi:.

Quando desideri regolare immagini o video per visualizzarli correttamente su diversi dispositivi
Quando desideri visualizzare immagini di sfondo o simili a schermo intero consentendo il ritaglio
Quando desideri adattare un'immagine a un elemento genitore mantenendone il rapporto d'aspetto
Quando desideri visualizzare dimensioni delle immagini in modo uniforme, ad esempio nelle gallerie

Utilizzare object-fit in queste situazioni può mantenere la coerenza del design e migliorare l'esperienza utente.

Riepilogo

object-fit è una potente proprietà CSS che ti consente di controllare in modo flessibile come immagini e video vengono visualizzati rispetto agli elementi genitori su una pagina web. Utilizzando diversi valori come fill, contain, cover, none e scale-down, puoi soddisfare varie esigenze di design. Capendo come usarlo correttamente e applicandolo in modo appropriato, puoi ottenere layout visivamente accattivanti.

Proprietà `object-position`

La proprietà CSS object-position viene utilizzata per controllare la posizione di contenuti come immagini e video all'interno di un elemento. Usando object-position, puoi posizionare il contenuto in punti specifici e fornire effetti visivi che si adattano al layout.

Panoramica di `object-position`

object-position viene applicato principalmente a elementi multimediali come i tag <img> e <video>. Questa proprietà controlla dove viene visualizzato il contenuto multimediale nel contenitore. object-fit viene spesso utilizzato in combinazione con object-position, dove object-fit definisce come un'immagine o un video si adatta alla dimensione del contenitore e object-position regola la posizione del contenuto.

Come specificare i valori

object-position può specificare le posizioni usando uno, due o quattro valori. Tuttavia, la specifica di quattro valori potrebbe non essere supportata dai browser più vecchi.

Specificare un valore

Se viene specificato solo un valore, questo viene interpretato come la posizione orizzontale (asse X), mentre la posizione verticale (asse Y) viene automaticamente impostata su center.

Quando viene specificato come object-position: left;, l’oggetto viene posizionato a sinistra.
Quando viene specificato come object-position: 70%;, l’oggetto viene posizionato al 70% orizzontalmente e centrato verticalmente.
Quando viene specificato come object-position: 50px;, l’oggetto viene posizionato 50px da sinistra e centrato verticalmente.

Specificare due valori

Specificando due valori, puoi impostare separatamente le posizioni orizzontale (asse X) e verticale (asse Y).

Quando viene specificato come object-position: center center;, l’oggetto viene centrato.
Quando viene specificato come object-position: right top;, l’oggetto viene posizionato in alto a destra.
Quando viene specificato come object-position: 75% 20%;, l’oggetto viene posizionato al 75% orizzontalmente e al 20% verticalmente.
Quando viene specificato come object-position: 50px 25px;, l’oggetto viene posizionato a 50px da sinistra e a 25px dall’alto.

Specificare quattro valori

Specificando quattro valori, puoi fornire un posizionamento più dettagliato usando parole chiave come left o top insieme ai loro offset.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;

Quando viene specificato come object-position: left 10px top 20px;, l’oggetto viene posizionato a 10px da sinistra e a 20px dall’alto.
Quando viene specificato come object-position: right 15% bottom 30px;, l’oggetto viene posizionato a 15% da destra e a 30px dal basso.

Formato di specifica dei valori

object-position può accettare i seguenti formati di valore.

Puoi specificare parole chiave come top, right, bottom, left e center.
Puoi anche specificare valori usando percentuali come 50% o unità come px.

Ad esempio, puoi usarlo in questo modo.

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

Combinazione di parole chiave e percentuali

È anche possibile combinare parole chiave e percentuali.

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

In questo esempio, l'immagine è posizionata al bordo destro e centrata verticalmente al 50%. Questa combinazione è molto utile quando è necessario un posizionamento flessibile.

Combinazione con `object-fit`

object-position viene spesso utilizzato insieme a object-fit. object-fit determina come un'immagine o un video vengono ridimensionati rispetto alla loro cornice. Ad esempio, utilizzare object-fit: cover ritaglia l'immagine per adattarla alla cornice e la posiziona secondo il object-position specificato.

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

In questo esempio, l'immagine si estende sull'intero contenitore, mostrando la parte inferiore destra del contenuto.

Esempi combinati con i valori di `object-fit`

Puoi specificare i seguenti valori per object-fit.

fill: L'immagine potrebbe essere distorta, ma si adatta all'intero contenitore.
contain: L'intera immagine viene visualizzata mantenendo il rapporto d'aspetto.
cover: Ritagliata per adattarsi al contenitore, mantenendo il rapporto d'aspetto.
none: L'immagine viene visualizzata nella sua dimensione originale.

Ad esempio, usando object-fit: contain viene visualizzata l’intera immagine e posizionata secondo l’impostazione di object-position.

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

Con questa impostazione, l’immagine viene posizionata sul lato destro del contenitore e viene mostrata per intero.

Utilizzo avanzato

object-position può essere applicato in vari scenari non solo per semplici regolazioni di posizionamento, ma anche per migliorare gli effetti visivi.

Enfatizzare una parte dell'immagine

È utile quando si desidera mettere a fuoco una parte specifica dell'immagine piuttosto che visualizzare l'intera immagine. Imposta object-fit su cover e utilizza object-position per focalizzarti su un'area specifica.

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

In questo esempio, viene visualizzata la parte inferiore sinistra dell'immagine, enfatizzando le parti importanti.

Quando si utilizza un video come sfondo

object-position è utile anche quando si utilizza un video come sfondo. È possibile posizionare il video in una posizione specifica per mantenere la coerenza con il design generale della pagina.

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

In questa configurazione, il video si adatta all'intera pagina ed è posizionato nella parte superiore centrale.

Problemi comuni e soluzioni

Potrebbero sorgere alcuni problemi quando si utilizza object-position. Qui introduciamo i problemi comuni e le relative soluzioni.

Parte dell'immagine è tagliata

Quando si utilizza object-fit: cover, l'immagine potrebbe essere ritagliata per adattarsi al contenitore. In questo caso, regolando la posizione di visualizzazione con object-position, è possibile assicurarsi che le parti importanti siano visibili.

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

La posizione dell'immagine non è quella prevista

Le specifiche in percentuale potrebbero non essere sempre intuitive. È necessario considerare le dimensioni e il rapporto d'aspetto del contenitore ed effettuare prove con valori diversi. Utilizzare strumenti per sviluppatori per regolazioni in tempo reale è efficace.

Riepilogo

object-position è uno strumento potente per posizionare liberamente gli elementi multimediali. Combinandolo con object-fit, è possibile ottenere layout flessibili adattati al design. Padroneggiare parole chiave, percentuali e unità di lunghezza per massimizzare gli effetti visivi in diverse situazioni.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

`overflow` e proprietà `contain`Proprietà CSS relative alla trasparenza

Proprietà `object-fit` e `object-position`

YouTube Video

HTML per Anteprima

Relativo al posizionamento degli oggetti

Proprietà object-fit

Valori di object-fit

fill (Valore predefinito)

contain

cover

none

scale-down

Esempio di utilizzo

Adattare le immagini di sfondo all'elemento genitore

Visualizzare immagini mantenendo il rapporto d'aspetto

Errori comuni

Situazioni in cui utilizzare object-fit

Riepilogo

Proprietà object-position

Panoramica di object-position

Come specificare i valori

Specificare un valore

Specificare due valori

Specificare quattro valori

Formato di specifica dei valori

Combinazione di parole chiave e percentuali

Combinazione con object-fit

Esempi combinati con i valori di object-fit

Utilizzo avanzato

Enfatizzare una parte dell'immagine

Quando si utilizza un video come sfondo

Problemi comuni e soluzioni

Parte dell'immagine è tagliata

La posizione dell'immagine non è quella prevista

Riepilogo

YouTube Video

Proprietà `object-fit`

Valori di `object-fit`

`fill` (Valore predefinito)

`contain`

`cover`

`none`

`scale-down`

Situazioni in cui utilizzare `object-fit`

Proprietà `object-position`

Panoramica di `object-position`

Combinazione con `object-fit`

Esempi combinati con i valori di `object-fit`