సిఎస్ఎస్ అస్పెక్ట్ రేషియో అట్రిబ్యూట్

定义和用法

aspect-ratio 属性允许您定义元素的宽度和高度之间的比例。

如果设置了 aspect-ratio 和 width 属性，高度将按照定义的长宽比进行调整。

లక్షణం గురించి మరింత బాగా అర్థం చేసుకోవడానికి aspect-ratio లక్షణం, ప్రదర్శనను చూడండి.

సూచన:ప్రతిస్పందక సంరచనలో ఉపయోగించండి aspect-ratio ఎలిమెంట్స్ యొక్క పరిమాణం తరచుగా మారుతుంది ఉంటే, మీరు వెడల్పు మరియు ఎత్తు నిష్పత్తిని పరిరక్షించాలి అనే లక్షణం ఉంది.

ప్రతిమానం

ఉదాహరణ 1

ఎలిమెంట్స్ కు వెడల్పు మరియు ఎత్తు నిష్పత్తిని జోడించండి:

div {
  aspect-ratio: 3 / 2;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 2

డివ్ ఎలిమెంట్స్ యొక్క పరిమాణం మారాలి ఉంటే,aspect-ratio ఈ లక్షణం డివ్ ఎలిమెంట్స్ యొక్క వెడల్పు మరియు ఎత్తు నిష్పత్తిని నియంత్రించడానికి అనుకూలంగా ఉంది. ఉదాహరణకు, చిత్రాల సేకరణలో, డివ్ ఎలిమెంట్స్ యొక్క పరిమాణం అన్ని పరికరాలకు అనుకూలంగా మారగలదు అయితే, చిత్రాల వెడల్పు మరియు ఎత్తు నిష్పత్తిని పరిరక్షించాలి:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>మార్గం</div>
  <div>వీధి పై పుష్పాలు</div>
  <div>కొండలు</div>
  <div>Cinque Terre</div>
</div>

స్వయంగా ప్రయోగించండి

CSS సంకేతాలు

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

లక్షణ విలువ

విలువ వివరణ
number మొదటి సంఖ్య విస్తరణలో వెడల్పు విలువను నిర్దేశిస్తుంది.
number

రెండవ సంఖ్య విస్తరణలో ఎత్తు విలువను నిర్దేశిస్తుంది.

ఎంపిక. ఎందుకంటే సెట్ చేయబడలేదు అయితే, ఎత్తు విలువ అప్రమేయంగా 1 కాగలదు.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పాటు నుండి పారంతర్యం చేసుకుంటుంది. చూడండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ auto
పారంతర్యం స్థితి లక్షణం: ఏ
అనిమేషన్ తయారీ: మద్దతు. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.aspectRatio="16/9"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను పేర్కొంది.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
88 88 89 15 74

సంబంధిత పేజీలు

శిక్షణా పత్రికCSS గ్రిడ్ లేఆఉట్ మొడ్యూల్

సూచనలు:CSS ఓబ్జెక్ట్-ఫిట్ అట్రిబ్యూట్

సూచనలు:CSS ఓబ్జెక్ట్-పోసిషన్ అట్రిబ్యూట్