CSS aspect-ratio ominaisuus

Määrittely ja käyttö

aspect-ratio Ominaisuus mahdollistaa elementin leveys- ja korkeusprosentin määrittämisen.

Jos asetetaan aspect-ratio ja width Ominaisuus, korkeus mukautetaan määritettyyn kuvasuhteeseen.

Ymmärtääksesi paremmin aspect-ratio Ominaisuutta, katso esittely.

Vinkki:Vastauksellisessa asettelussa käytetään aspect-ratio Ominaisuus, kun elementin kokoonpano muuttuu usein, haluat säilyttää leveys- ja korkeusprosentin.

Esimerkki

Esimerkki 1

Lisää elementille kuvasuhde:

div {
  aspect-ratio: 3 / 2;
}

Kokeile itse

Esimerkki 2

Jos div-elementtien kokoonpanon muuttaminen on tarpeen:aspect-ratio Ominaisuus sopii erinomaisesti div-elementtien leveys-suhteen hallintaan. Esimerkiksi kuvakokoelmassa haluat div-elementtien kokoonpanon joustavuuden sopeutumaan kaikkiin laitteisiin, mutta haluat säilyttää kuvien kuvasuhteen:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>katu</div>
  <div>katujen kukat</div>
  <div>vuoret</div>
  <div>Cinque Terre</div>
</div>

Kokeile itse

CSS-kieli

aspect-ratio: number/number|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
number Ensimmäinen numero määrittää kuvasuhteen leveysarvon.
number

Toinen numero määrittää kuvasuhteen korkeusarvon.

Valinnainen. Jos sitä ei aseteta, korkeusarvo on oletuksena 1.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.aspectRatio="16/9"

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä ominaisuutta.

Chrome Edge Firefox Safari Opera
88 88 89 15 74

Aiheeseen liittyvät sivut

Oppaita:CSS verkkoasettelumoduuli

Viittaus:CSS Object-fit ominaisuus

Viittaus:CSS Object-position ominaisuus