CSS ఒబ్జెక్ట్-పోసిషన్ అట్రిబ్యూట్
- ముంది పేజీ object-fit
- తరువాత పేజీ offset
నిర్వచనం మరియు ఉపయోగం
object-position లక్షణం మరియు object-fit లక్షణం కలిసి ఉపయోగించడం ద్వారా <img> లేదా <video> లో ఉన్న స్వంత కంటెంట్ బాక్స్ లో ఎలా x/y కోణాలను నిర్ణయించాలి నిర్ణయిస్తుంది.
మరింత చూడండి:
CSS శిక్షణ మార్గం:CSS object-fit
CSS పరిశీలన మార్గం:CSS object-position
HTML DOM పరిశీలన మార్గం:objectPosition లక్షణం
ఉదాహరణ
చిత్రం పరిమాణాన్ని తన కంటెంట్ బాక్స్ కు సరిపోటుగా సర్దుపరచండి, మరియు చిత్రాన్ని కంటెంట్ బాక్స్ లో కుడిపట్టు నుండి 5px మరియు పైకి 10% స్థానంలో చేర్చండి:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
CSS సంకేతాలు
object-position: position|initial|inherit;
లక్షణ విలువ
| విలువ | వివరణ |
|---|---|
| position |
చిత్రం లేదా వీడియో తన కంటెంట్ బాక్స్ లోని స్థానాన్ని నిర్ణయిస్తుంది. మొదటి విలువ కుడి అక్షాన్ని నియంత్రిస్తుంది, రెండవ విలువ పై అక్షాన్ని నియంత్రిస్తుంది. ఇది స్ట్రింగ్ (ఎల్లా, మధ్యం, కుడి) లేదా సంఖ్య (px లేదా % ఇద్దరుగా) కావచ్చు. మానిటర్ విలువలు అనుమతిస్తాయి. |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన తల్లి అంశం నుండి పారంపర్యం చేసుకుంది. చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | 50% 50% |
|---|---|
| పారంపర్యం: | అవుతుంది |
| అనిమేషన్ తయారీ: | మద్దతు ఉంది. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| సంస్కరణ: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.objectPosition="0 10%" |
బ్రౌజర్ మద్దతు
పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ సంస్కరణను పేర్కొంది.
| క్రోమ్ | IE / ఎంజెక్స్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- ముంది పేజీ object-fit
- తరువాత పేజీ offset
