Sintassi

Significato dei valori principali:

• center: Allinea l’oggetto al centro (default).

• top, bottom, left, right: Allineano l’oggetto ai margini specificati.

• percentuali: Ad esempio 25% 75% posiziona l’oggetto al 25% in orizzontale e 75% in verticale.

• pixel o altre unità: È possibile usare px, em, ecc. per un controllo più preciso.

Esempio proprietà: object-position

Codice Esempio: object-position

CODE: CSS

1. .object-position-box img {

2.   object-fit: none;

3.   object-position: right top;

4.   width: 100%;

5.   height: 100%;

6. }

Contenuto Esempio: object-position

Esempio di utilizzo di object-position

L'immagine usa object-position: right top per mostrarsi allineata in alto a destra del contenitore:

CSS e HTML per l’esempio con object-position:

  
  <style>
    .object-position-box {
      width: 300px;
      height: 200px;
      border: 2px solid #ccc;
      overflow: hidden;
    }

    .object-position-box img {
      width: 100%;
      height: 100%;
      object-fit: none;
      object-position: right top;
    }
  </style>

  <div class="object-position-box">
    <img src="https://placehold.co/500x300/orange/white" alt="immagine" />
  </div>
  

✅ Nota importante:
Se non usi object-fit, l’effetto di object-position potrebbe non essere visibile, poiché l’elemento occupa tutto il contenitore in modo uniforme.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser