Proprietà CSS adatta agli oggetti
Esempio
Taglia i lati di un'immagine, preservando le proporzioni e riempi lo spazio:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Definizione e utilizzo
La object-fit
proprietà viene utilizzata per specificare come ridimensionare un <img> o un <video> per adattarlo al suo contenitore.
Questa proprietà indica al contenuto di riempire il contenitore in vari modi; come "preserva le proporzioni" o "allunga e occupa più spazio possibile".
Valore di default: | vedi singole proprietà |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.objectFit="copertina" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Sintassi CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Valori di proprietà
Value | Description | Try it |
---|---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit | |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box | |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit | |
none | The replaced content is not resized | |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pagine correlate
Tutorial CSS: adattamento agli oggetti CSS
Riferimento CSS: posizione oggetto CSS
Riferimento HTML DOM: la proprietà objectFit