CSS aspect-ratio və object-fit generatoru
Şəkilləriniz eninə-uzununa dartılaraq təhrif olunur, yaxud yüklənərkən səhifədə sıçrayış (CLS) yaradır? Müasir aspect-ratio və object-fit: cover xassələri ilə proporsiyaları qoruyun və interaktiv fokus nöqtəsini tənzimləyin.
/* Müasir responsiv media bloku */
.media-card {
width: 100%;
max-width: 480px;
aspect-ratio: 16 / 9; /* Sıfır CLS sıçrayışı */
overflow: hidden;
border-radius: 12px;
}
.media-card img {
width: 100%;
height: 100%;
object-fit: cover; /* Təhrif olmadan kəsilir */
object-position: 50% 50%; /* Fokus mərkəzi */
}Necə istifadə etmək olar
- Hazır proporsiya şablonlarından birini seçin (16:9 video, 1:1 kvadrat, 4:3 foto, 9:16 Shorts və ya 21:9 enli ekran).
object-fitrejimini dəyişin (cover, contain, fill, none) və şəklin blok daxilində necə davrandığını izləyin.- Şəklin üzərinə klikləyərək və ya nişangahı sürükləyərək
object-positionfokus mərkəzini (məsələn, 30% 70%) təyin edin. - Konteynerin enini və hündürlüyünü dəyişin, CLS diaqnostikasını yoxlayın və hazır CSS kodunu kopyalayın.
Bu necə işləyir
aspect-ratio nədir və niyə vacibdir?
aspect-ratio xassəsi elementin eni və hündürlüyü arasında sabit nisbət saxlayır (məsələn, aspect-ratio: 16 / 9). Əvvəllər bunun üçün mürəkkəb padding-top: 56.25% «padding hack» üsulundan istifadə olunurdu. Müasir aspect-ratio tək sətirlə brauzerə elementin hündürlüyünü dərhal hesablamağa imkan verir.
Sıfır CLS (Cumulative Layout Shift) sirri
Şəkil şəbəkədən gec yükləndikdə əgər onun hündürlüyü məlum deyilsə, yükləndiyi an altındakı bütün mətnləri aşağı itələyir və pis istifadəçi təcrübəsi (yüksək CLS balı) yaradır. Konteynerə aspect-ratio verməklə brauzer şəkil yüklənməmişdən əvvəl onun yerini tam dəqiq rezervasiya edir.
/* Şəkil yüklənməsə belə, yer dərhal rezerv olunur */
.hero-img {
width: 100%;
aspect-ratio: 16 / 9;
}object-fit və object-position təyinatı
object-fit: cover şəkli konteynerin bütün sahəsinə yayır və proporsiyasını pozmadan artıq qalan kənarları kəsir (background-size: cover kimi). object-position isə kəsilmə zamanı şəklin hansı vacib hissəsinin (məsələn, insanın üzünün) mərkəzdə qalacağını müəyyənləşdirir.
.avatar {
width: 80px;
height: 80px;
object-fit: cover;
object-position: center top; /* Üz kəsilmir */
}Tez-tez verilən suallar
object-fit: fill ilə cover arasındakı fərq nədir?
fill şəkli konteynerin ölçüsünə uyğun məcburi dartır və insan sifətləri və ya obyektlər sıxılmış / deformasiyaya uğramış görünür. cover isə orijinal proporsiyanı tam qoruyur, sadəcə kənarları kəsir.
aspect-ratio bütün müasir brauzerlərdə işləyirmi?
Bəli, Chrome, Safari, Firefox və Edge brauzerlərinin bütün cari və son illərdəki versiyalarında tam dəstəklənir (95%+ qlobal dəstək).
Responsive videolarda necə tətbiq olunur?
İframe və ya <video> teqinə width: 100%; aspect-ratio: 16 / 9; height: auto; vermək kifayətdir; video bütün ekranlarda proporsional kiçilib böyüyəcək.
