CSS object-position అట్రిబ్యూట్

CSS object-position అనుపాతం ఉపయోగించబడింది <img> లేదా <video> ని అదనంగా ప్రదర్శించడానికి ఉపయోగిస్తారు ఉంది దాని కంటైనర్ లో స్థానాన్ని తీర్చిదిద్దడానికి.

చిత్రం

హాంగ్కాంగ్ నుండి ఈ చిత్రాన్ని చూడండి, పరిమాణం 600x400 పిక్సెల్స్ ఉంది:

తరువాత, మేము ఉపయోగిస్తాము object-fit: cover; అనుపాతం నిర్ణయించడానికి మరియు ప్రదర్శించబడుతున్న పరిమాణానికి పూరించడానికి ఉపయోగిస్తాము. అయితే, చిత్రం ఈ విధంగా కటించబడుతుంది:

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

亲自试一试

object-position అనుపాతం ఉపయోగించడం

ప్రదర్శించబడుతున్న చిత్రం భాగం మాకు కావలసిన స్థానంలో లేకపోతే. చిత్రాన్ని స్థానం కచ్చితంగా నిర్ణయించడానికి, మేము ఉపయోగిస్తాము object-position అనుపాతం.

ఇక్కడ, మేము ఉపయోగిస్తాము object-position అనుపాతం ఉపయోగించి చిత్రాన్ని మధ్యకే ఉంచాలి మరియు పాత భవనాన్ని మధ్యకే ఉంచాలి:

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

亲自试一试

ఇక్కడ, మేము ఉపయోగిస్తాము object-position 属性来定位图像，使著名的紫禁城角楼位于右侧：

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

亲自试一试

CSS object-* 属性

下表列出了 CSS object-* 属性：