CSS ఆబ్జెక్ట్-ఫిట్ అట్రిబ్యూట్

定义和用法

object-fit 属性用于规定应如何调整 或

这个属性告知内容以何种方式填充容器。例如“保留长宽比”或“展开并占用尽可能多的空间”。

另请参阅：

CSS 教程：CSS object-fit

CSS 参考手册：CSS object-position

HTML DOM 参考手册：objectFit 属性

实例

裁剪图像的两边，保留长宽比，然后填充空间：

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

亲自试一试

CSS 语法

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

属性值

值 描述
fill 默认值。调整替换内容的大小来填充元素的内容框。如有必要，对象将被拉伸或挤压。
contain పునఃసంకేతపత్రం కంటెంట్ పరిమాణాన్ని కాప్ చేయడం ద్వారా అంతరాన్ని కాప్ చేస్తుంది.
cover పునఃసంకేతపత్రం కంటెంట్ పరిమాణాన్ని మార్చుట ద్వారా పూర్తిగా నింపే అంశాన్ని నింపే అంశం పూర్తిగా నింపే అంశం లో అంతరాన్ని కాప్ చేస్తుంది.
none పునఃసంకేతపత్రం కంటెంట్ పరిమాణాన్ని మార్చదు.
scale-down కంటెంట్ యొక్క పరిమాణం none లేదా contain లో ఒకటితో సమానంగా ఉంటుంది, వాటిలో ఏది బయటి ఆబ్జెక్ట్ పరిమాణాన్ని చిన్నగా పొందుతుందో ఆధారంగా ఉంటుంది.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు అంటే సెట్ చేయండి. చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడుతున్న సంకేతపత్రం నుండి వారసత్వం చేసుకుంది. చూడండి: inherit.

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

అప్రమేయం: ప్రత్యేక లక్షణాలను చూడండి.
వారసత్వం: లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
సంస్కరణ: CSS3
JavaScript సంకేతపత్రం: object.style.objectFit="cover"

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

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

క్రోమ్ IE / ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
31.0 16.0 36.0 7.1 19.0