⌘K

aspect-ratio xassəsi

aspect-ratio xassəsi flex bloklar üçün eninə ox boyunca və gridlər üçün üfiqi ox boyunca elementlərin düzləndirilməsini təyin edir. Ana elementə şamil edilir.

Sintaksis

cssselektor {
  aspect-ratio: auto ve ya nisbet;
}

Dəyərlər

Dəyər İzah
auto Elementin üstünlük verilən en uzunluq nisbəti yoxdur və brauzer onu avtomatik olaraq elementin eni və hündürlüyünə əsasən təyin edir.
nisbet Nisbət 16/9 şəklində yazılır, burada birinci rəqəm en, ikinci rəqəm isə hündürlükdür. Əgər hansısa dəyər göstərilməyibsə, o zaman 1-ə bərabər hesab olunur. Həmçinin bəzi nisbətləri bir rəqəmlə yazmaq mümkündür. Məsələn, 2/1 0.5 kimi yazıla bilər, bu eyni nəticəni verəcək.
auto && nisbet Əgər en uzunluq nisbəti auto açar sözü ilə birlikdə gəlirsə (misal: auto 1/2), onda göstərilən nisbət seçiləcək, lakin öz nisbəti olan əvəz olunan elementlər üçün (məsələn, şəkillər və videolar) yalnız onun öz nisbətindən istifadə olunacaq.

Nümunə

Gəlin düymə üçün avtomatik en uzunluq nisbəti təyin edək: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Nümunə

İndi isə gəlin düymə üçün en uzunluq nisbətini 1/2 kimi təyin edək: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Həmçinin bax

BackResize xassəsiNextObject-fit xassəsi