Eienskap aspect-ratio
Die eienskap aspect-ratio spesifiseer die belyning
van elemente langs die dwarsskyf vir flex-blokke
en op die horisontale as vir grids.
Dit word op die ouerelement toegepas.
Sintaksis
selektor {
aspect-ratio: auto of verhouding;
}
Waardes
| Waarde | Beskrywing |
|---|---|
auto |
Die element het geen voorkeur-aspekverhouding nie en die blaaier stel dit outomaties vas, gebaseer op die breedte en hoogte van die element. |
verhouding |
Die verhouding word geskryf as 16/9,
hier is die eerste getal die breedte, en die tweede
getal - die hoogte. As 'n waarde nie
gespesifiseer is nie, word dit as gelyk aan 1 beskou. Sommige
verhoudings kan ook met een getal geskryf word.
Byvoorbeeld, 2/1 kan geskryf word
as 0.5, dit sal dieselfde resultaat lewer. |
auto && verhouding |
As die aspekverhouding saam
met die sleutelwoord auto kom (voorbeeld: auto 1/2),
dan sal die gespesifiseerde verhouding gekies word,
maar vir vervangbare elemente (soos
beelde en video's) met hul eie aspekverhouding
sal slegs dit gebruik word. |
Voorbeeld
Kom ons stel 'n outomatiese aspekverhouding vir die knoppie:
<p>
<button>Klik</button>
</p>
button {
aspect-ratio: auto;
background-color: #9DDFA4;
padding: 1em;
}
:
Voorbeeld
Laat ons nou 'n aspekverhouding vir die knoppie spesifiseer
as 1/2:
<p>
<button>Klik</button>
</p>
button {
aspect-ratio: 1/2;
background-color: #9DDFA4;
padding: 1em;
}
:
Sien ook
-
die eienskap
object-fit,
wat elemente skaal
