CSS object-fit bilan rasmlarni masshtabini to'girlash va kesish.
Tags: css, webdev, beginners, tutorial
Published: 2022-05-05 08:19:48

### Kirish:

Bazida rasmlar bilan ishlashda asl tomonlar nisbati(aspect ratio)ni saqlab qolishga to'g'ri keladi. Tomonlar nisbatini saqlab qolish rasmlarni cho‘zilgan yoki siqilgan holda ko‘rinishini oldini oladi. Ushbu muammoning eng sodda yechimi `background-image` CSS propertydan foydalanishdir. Zamonaviyroq yo'li esa `object-fit` CSS propertysidan foydalanish.

Ushbu maqolada siz `object-fit` CSS xususiyati uchun mavjud bo'lgan `fill`, `cover`, `contain`, `none` va `scale-down` qiymatlarining ta'sirini va bu qiymatlar qanday qilib rasmlarni kesishi va masshtablashi mumkinligini o'rganasiz. Shuningdek, siz `object-position` CSS xususiyatini va u tasvirlarni qanday o'zgartirishi mumkinligini ham o'rganasiz.

Namuna rasmni ko'rsatish uchun ishlatilgan quyidagi kodni ko'rib chiqamiz:

```html
<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/bGLdMdy %}

Ushbu rasmning asl kengligi 1200px va balandligi 674px. `img` atributlaridan foydalanib, eni `600` va `337` ga o'rnatildi - asl o'lchamlarning yarmi - tomonlar nisbatini saqlab qolgan holda.

Endi, huddi shu rasmni kengligi 300 piksel va balandligi 337 piksel bo'lgan vaziyatni ko'rib chiqamiz:

```html
<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/zYRGbwY %}
Rasm endi asl tomonlar nisbati(aspect ratio)ni saqlamaydi va "siqilgan" holatda ko'rinadi.

### `object-fit: fill` dan foydalanish:

`fill` qiymati `object-fit` uchun dastlabki qiymatdir. Bu qiymat asl tomonlar nisbatini saqlamaydi.

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>
```
Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/mdXJoBB %}
Bu brauzerni `default` qiymati bo'lganligi tufayli tasvirda hechqanday o'zgarish yo'q ya'ni rasm haliyam siqilgan holda ko'rinmoqda.

### `object-fit: cover` dan foydalanish:

`cover` qiymati asl tomonlar nisbatini saqlaydi, lekin rasm unga ajratilgan barcha bo'sh joyni egallaydi.

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/QWQboQz %}
Muayyan holatlarda `object-fit: cover` rasmni kesilgan holda ko'rinishiga sabab bo'ladi. Yuqoridagi misolda, rasmning chap va o'ngdagi ayrim qismlari ko'rinmaydi, chunki u qismlar rasm uchun ajratilgan kenglik chegarasiga sig'maydi.

### `object-fit: contain` dan foydalanish:

`contain` qiymati asl tomonlar nisbatini saqlaydi, lekin rasm ham unga ajratilgan bo'sh joy chegarasidan oshmaydi ya'ni to'liq tasvirni unga ajratilgan joyga sig'dirib ko'rsatadi.

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/mdXJoQx %}
Muayyan holatlarda `object-fit: contain` tasvirning barcha mavjud bo'sh joyini to'ldirmasligi ham mumkin. Ushbu rasmda tasvirning tepasida va tagida vertikal bo'sh joy mavjud, chunki ajratilgan balandlik kichraytirilgan balandlikdan balandroqdir.

### `object-fit: none` dan foydalanish:

`none` qiymati tasvir razmerini umuman o'zgartirmaydi.

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/XWZbGLK %}
Rasmning razmeri mavjud bo'sh joydan kattaroq bo'lgan hollarda, u kesilgan holatda ko'rinadi. Ushbu rasmda asl tasvirning chap, o'ng, yuqori va pastki qismidagi ba'zi qismlari ko'rinmaydi, chunki ular e'lon qilingan kenglik va balandlik chegaralariga sig'maydi.

### `object-fit: scale-down` dan foydalanish:

`scale-down` qiymati, qaysi biri kichikroq rasm holatiga olib kelishiga qarab yoki `contain` yoki `none` dek ko'rsatadi rasmni.

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/wvyaZvO %}
Ushbu misoldagi rasmda tasvir `contain` qiymati bilan bir hil holatga kichraytirilgan.

### `object-fit` va `object-position` dan foydalanish:

Agar `object-fit` natijasida olingan tasvir kesilgan holda ko'rinsa, `by default` tasvir markazda ko'rinadi. `object-position` propertysidan fokus nuqtasini o'zgartirish uchun foydalanish mumkin.

Oldingi `object-fit: cover` misolini ko'rib chiqaylik:

{% codepen https://codepen.io/dawroun/pen/QWQboQz %}

Keling, rasmning o'ng tomonini ochish uchun tasvirning ko'rinadigan qismini X o'qi bo'ylab o'zgartiramiz:

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/vYdOMXa %}

Ushbu misoldagi rasmida toshbaqa tasvirdan kesilib chiqib ketdi.
Va nihoyat, keling, agar pozitsiya mavjud bo'sh joydan tashqarida ko'rsatilgan bo'lsa, nima bo'lishini ko'rib chiqamiz:

```html
<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>
```

Ushbu kod brauzerda quyidagi natijani beradi:

{% codepen https://codepen.io/dawroun/pen/vYdOMgz %}
Ushbu misoldagi rasmida toshbaqa va alligator boshlari tasvirdan kesilgan. Tasvirning chap tomonidagi ofsetning 20% ni tashkil qilish uchun oraliq bo'sh joy ham mavjud.

## Xulosa:

- Ushbu maqolada siz `object-fit` va `object-position` CSS propertylari uchun mavjud qiymatlarni o'rgandingiz.

- `object-fit` ham `inherit`, `initial` va `unset` qiymatlarini ham qabul qiladi.

- Loyihangizda `object-fit` dan foydalanishdan oldin, brouzeringiz bu propertyni qo'llab quvvatlay oladimi yo'qmi tekshirib oling.

> Sabr bilan ohirigacha o'qiganingiz uchun `rahmat`, yana qaysi mavzularda maqola yozishimni xohlaysiz?