Attribute ng aspect-ratio sa CSS

Definisyon at Paggamit

aspect-ratio Ang katangian ay nagbibigay-daan sa iyo na itakda ang rasyon ng lakas at taas ng elemento.

Kung ito ay itinakda aspect-ratio at width Katangian, ang taas ay gagawing ayon sa tinukoy na rasyon ng lakas at taas.

Para sa mas mabuting pag-unawa aspect-ratio Katangian, tingnan ang demo.

Mga Payo:Sa paggamit ng responsive layout aspect-ratio Ang katangian, kapag ang laki ng elemento ay kadalasang nagbabago, nais mong panatilihin ang rasyon ng lakas at taas.

Halimbawa

Halimbawa 1

Magdagdag ng rasyon ng lakas at taas sa elemento:

div {
  aspect-ratio: 3 / 2;
}

Subukan nang sarili

Halimbawa 2

Kung ang laki ng elemento div ay kailangan baguhinaspect-ratio Ang katangian ay napaka magandang para sa kontrol ng rasyon ng lakas at taas ng elemento div. Halimbawa, sa collection ng larawan, nais mong baguhin ang laki ng elemento div upang umayon sa lahat ng aparato, ngunit ayon sa rasyon ng lakas at taas ng larawan:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

Subukan nang sarili

Grammar ng CSS

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

Halaga ng katangian

Detalye ng Teknolohiya

Suporta ng Browser

Ang numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

kaugnay na pahina

tuturuan:CSS 网格布局模块

tungkol sa:CSS Object-fit 属性

tungkol sa:CSS Object-position 属性