Posizione dell'oggetto - Trucchi CSS

La object-positionproprietà viene utilizzata insieme alla object-fitproprietà e definisce il modo in cui un elemento come un video o un'immagine viene posizionato con le coordinate X / Y all'interno della sua casella di contenuto. Questa proprietà accetta due valori numerici, come 0 10%o 0 10px. In questi esempi, il primo numero indica che l'immagine dovrebbe essere posizionata a sinistra della casella del contenuto (0), il secondo che dovrebbe essere posizionata al 10% o 10px dall'alto. È anche possibile utilizzare valori negativi.

Il valore predefinito per object-positionè 50% 50%quando si utilizza la object-fitproprietà su un'immagine, in modo che per impostazione predefinita tutte le immagini siano posizionate al centro della loro casella di contenuto, in questo modo:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Demo

Di seguito sono riportati alcuni esempi di come possiamo manipolare l' object-positionimmagine di un'immagine con la object-fitproprietà impostata su none. Se il contenuto dell'immagine non riempie la casella del contenuto per qualsiasi motivo, lo spazio vuoto mostrerà lo sfondo dell'elemento, che può essere un colore o anche un background-image, come nell'ultimo esempio:

Vedere la posizione dell'oggetto penna di Robin Rendle (@robinrendle) su CodePen.