CSS object-fit ਵਿਸ਼ੇਸ਼ਤਾ

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

浏览器支持

ਸਾਰੇ ਸਤਰਾਂ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੀ ਵਰਜਨ ਦਿਸਾਈ ਹੈ。

ਵਿਸ਼ੇਸ਼ਤਾ ਚਰੋਮ ਆਈਈ ਫਾਰਫੈਕਸ ਸਫਾਰੀ ਓਪਰਾ
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit ਵਿਸ਼ੇਸ਼ਤਾ

CSS object-fit ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ <img> ਜਾਂ <video> ਦੇ ਆਕਾਰ ਨੂੰ ਉਸ ਦੇ ਕੰਟੇਨਰ ਨਾਲ ਤਾਲਮੇਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕੰਟੇਨਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਭਰਨ ਲਈ ਦੱਸਦੀ ਹੈ। ਜਿਵੇਂ ਕਿ 'ਆਕਾਰ ਦਾ ਅਨੁਪਾਤ ਰੱਖੋ' ਜਾਂ 'ਫੁਲਕਰ ਕਰਕੇ ਜ਼ਿਆਦਾ ਜਗ੍ਹਾ ਲੈਣ'。

ਹੇਠ ਦਿੱਤੇ ਚਿੱਤਰ ਨੂੰ ਦੇਖੋ ਜੋ ਸ਼ੰਘਾਈ ਫੂਲ ਪੋਰਟ ਤੋਂ ਆਇਆ ਹੈ ਅਤੇ ਉਸ ਦਾ ਆਕਾਰ 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;}

آزمایش کنید