Proprietà objectFit dello stile
- Pagina precedente minWidth
- Pagina successiva objectPosition
- Torna alla pagina precedente Oggetto Style HTML DOM
Definizione e uso
objectFit L'attributo viene utilizzato per determinare come regolare la dimensione di <img> o <video> per adattarsi al suo contenitore.
Questa proprietà indica come il contenuto deve riempire il contenitore in vari modi; ad esempio, "mantenere il rapporto di aspetto" o "stirarsi e occupare il maggior spazio possibile".
Vedi anche:
Corso CSS:CSS object-fit
Manuale di riferimento CSS:Proprietà object-fit
Esempio
Taglia i lati dell'immagine, mantiene il rapporto di aspetto e riempi lo spazio:
document.getElementById("myImg").style.objectFit = "cover";
Sintassi
Restituisce la proprietà objectFit:
object.style.objectFit
Imposta la proprietà objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| fill | Predefinito. Ridimensiona il contenuto sostituito per riempire il riquadro di contenuto dell'elemento. Se necessario, l'oggetto sarà stirato o compresso. |
| contain | Ridimensiona il contenuto sostituito per mantenere il rapporto di aspetto, al contempo adattandosi al riquadro di contenuto dell'elemento. |
| cover | Ridimensiona il contenuto sostituito per mantenere il rapporto di aspetto mentre si adatta al riquadro di contenuto dell'elemento. L'oggetto sarà tagliato. |
| none | Il contenuto sostituito non viene ridimensionato. |
| scale-down | Le dimensioni del contenuto sono le stesse di none o contain, a seconda di quale dei due ottiene la dimensione dell'oggetto più piccola. |
| initial | Imposta questa proprietà al suo valore predefinito. Vedi anche initial. |
| inherit | Inherita questa proprietà dal suo elemento padre. Vedi anche inherit. |
Dettagli tecnici
| Valore predefinito: | fill |
|---|---|
| Valore di ritorno: | Una stringa che rappresenta la dimensione dell'elemento Proprietà object-fit. |
| Versione di CSS: | CSS3 |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
- Pagina precedente minWidth
- Pagina successiva objectPosition
- Torna alla pagina precedente Oggetto Style HTML DOM
