7-aprel Object fit

7-aprel

Object fit

• CSS object-fit xususiyati yoki
• Bu xususiyat tarkibni konteynerni turli yo'llar bilan to'ldirishni aytadi; "Ushbu tomonlar nisbatini saqlang" yoki "Iloji boricha ko'proq joy egallang".

Object fit

• Quyidagi rasmni olchamlari 400px ga 300px. Uni 200px ga 300px ga ozgartirsak Biz tasvir 200x300 pikselli konteynerga sig'dirish uchun siqib chiqarilayotganini ko'ramiz (uning asl tomonlar nisbati buziladi).

Object fit

• Yuqoridagi rasmning nisbatlari(sifati) buzilmasligi uchun object-fit xususiyatidan foydalanishimiz mumkin. Uning 5 ta qiymati mavjud:
• fill - bu standart. Tasvirning o'lchami berilgan o'lchamni to'ldirish uchun o'zgartiriladi. Agar kerak bo'lsa, rasm mos keladigan tarzda cho'ziladi yoki siqiladi.
• contain - Tasvir o'zining tomonlar nisbatini saqlaydi, lekin berilgan o'lchamga mos kelishi uchun o'lchami o'zgartiriladi.
• cover - Tasvir o'zining nisbatlarini saqlab qoladi va berilgan o'lchamni to'ldiradi. Tasvir mos kelishi uchun qirqib olinadi.
• none - Rasm o'lchami o'zgartirilmagan.
• scale-down - tasvir hech biri yoki tarkibida eng kichik versiyasiga kichraytiriladi

Object position

• CSS object-position xususiyati yoki
• Aytaylik, tasvirning ko'rsatilgan qismi biz xohlagan tarzda joylashtirilmagan. Tasvirni joylashtirish uchun biz object-position xususiyatidan foydalanamiz.
• Quyida biz tasvirni katta eski bino markazda bo'lishi uchun joylashtirish uchun ob'ekt-pozitsiya xususiyatidan foydalanamiz:

Object position

Object position