CSS object-fit 属性
- ముందస్తు పేజీ CSS ఇమేజ్ స్టైల్
- తదుపరి పేజీ CSS object-position
CSS object-fit 属性用于规定应如何调整 或
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS object-fit 属性
CSS object-fit ఈ గుణం ప్రదేశం పూరితంగా చేయడానికి వివిధ విధానాలను తెలుపుతుంది. ఉదాహరణకు, 'పరిమాణాన్ని కాపాడుకోండి' లేదా 'అన్ని స్థలాన్ని పూరితంగా చేయండి'.
ఈ గుణం ప్రదేశం పూరితంగా చేయడానికి వివిధ విధానాలను తెలుపుతుంది. ఉదాహరణకు, 'పరిమాణాన్ని కాపాడుకోండి' లేదా 'అన్ని స్థలాన్ని పూరితంగా చేయండి'.
దిగువన ప్రదర్శించబడిన చిత్రం పేరు శంఘయ్ ఫ్లోరా పార్క్ నుండి తీసిన ట్యూటిన్ చిత్రం, ఇది 300x300 పిక్సెల్స్ ఉంది:
కానీ, మేము పైని చిత్రాన్ని 200x300 పిక్సెల్స్ గా సెట్ చేసినప్పుడు, ఇది ఇలా కనిపిస్తుంది:
ఉదాహరణ
img {
width: 200px;
height: 300px;
}
మేము చూసేటప్పుడు, చిత్రం 200x300 పిక్సెల్స్ కన్నా కంప్రెస్ అవుతుంది మరియు మూల పరిమాణాన్ని నాశనం చేస్తారు.
మేము ఉపయోగిస్తే: object-fit: cover;ఇది చిత్రం యొక్క పక్కలను కట్టివేసి, పరిమాణాన్ని కాపాడుతుంది మరియు స్థలాన్ని పూరితంగా చేస్తుంది అని మాట్లాడుతుంది:
ఉదాహరణ
img {
width: 200px;
height: 400px;
object-fit: cover;
}
మరొక ఉదాహరణ
ఇక్కడ, మేము రెండు చిత్రాలు కలిగి ఉన్నాము మరియు బ్రౌజర్ విండో యొక్క 50% వెడల్పు మరియు 100% పొడవును పూరితంగా చేయాలని కోరుకున్నాము.
ఈ ఉదాహరణలో, మేము ఉపయోగించకపోతే: object-fitఅందువలన, మేము బ్రౌజర్ విండో పరిమాణాన్ని సరికొలువు చేసినప్పుడు, చిత్రం యొక్క పరిమాణాన్ని నాశనం చేస్తాము:
ఉదాహరణ
మరొక ఉదాహరణలో, మేము ఉపయోగిస్తాము: object-fit: cover;అందువలన, మేము బ్రౌజర్ విండో పరిమాణాన్ని సరికొలువు చేసినప్పుడు, చిత్రం యొక్క పరిమాణాన్ని కాపాడతారు:
ఉదాహరణ
CSS object-fit గుణం యొక్క అన్ని విలువలు
object-fit ఈ గుణం క్రింది విలువలను అంగీకరిస్తుంది:
fill- డిఫాల్ట్ విలువ. సరికొలువు చేసిన అంతర్భాగ పదార్థం యొక్క పరిమాణాన్ని పూరితంగా చేయండి. అవసరమైతే, ఈ వస్తువు యొక్క పరిమాణాన్ని సరికొలువు చేయడానికి అనుగుణంగా విస్తరించివేయి లేదా కలపివేయి.contain- సరికొలువు చేసిన అంతర్భాగ పదార్థాన్ని పరిమాణం చేయండి మరియు దానిని ప్రదేశం పూరితంగా చేయండి.cover- పూరిత ప్రదేశంలో అంతర్భాగ పదార్థం యొక్క అసమానతను నిర్వహించడానికి మార్పులు చేయండి. ఈ వస్తువు అనుగుణంగా కట్టివేయబడుతుంది.none- 不对替换的内容调整大小。scale-down- 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）
ఈ ఉదాహరణలో ప్రదర్శించబడింది: object-fit అట్రిబ్యూట్ యొక్క అన్ని సాధ్యమైన విలువలు:
ఉదాహరణ
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- ముందస్తు పేజీ CSS ఇమేజ్ స్టైల్
- తదుపరి పేజీ CSS object-position
