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</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>

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: 500px; 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.

Padroneggia l'uso di object-fit per creare design responsivi ed esteticamente gradevoli.

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.

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

In questo esempio, l'immagine è scalata per adattarsi al contenitore (object-fit: cover) e posizionata in modo che il suo centro venga visualizzato (object-position: center).

Come specificare i valori

object-position viene specificato con due valori come segue.

Posizione orizzontale (asse X)
Posizione verticale (asse Y)

Formato di specifica dei valori

In object-position, puoi specificare i valori nel seguente formato.

Parole chiave: top, right, bottom, left, center
Percentuale: da 0% a 100%
Unità di lunghezza: px, em, rem, ecc.

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

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.

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

In questa configurazione, l'immagine è posizionata nella parte superiore del contenitore, e l'intera immagine viene visualizzata.

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à `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

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`