თვისება aspect-ratio

თვისება aspect-ratio ადგენს ელემენტების გასწორებას განივი ღერძის გასწვრივ flex ბლოკებისთვის და ჰორიზონტალური ღერძის გასწვრივ ღრიდებისთვის. ეხება მშობელ ელემენტს.

სინტაქსი

სელექტორი {
	aspect-ratio: auto ან შეფარდება;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`auto`	ელემენტს არ აქვს სასურველი ასპექტის შეფარდება და ბრაუზერი ადგენს მას ავტომატურად, გამომდინარე ელემენტის სიგანიდან და სიმაღლიდან.
`შეფარდება`	შეფარდება იწერება `16/9` სახით, აქ პირველი რიცხვი არის სიგანე, ხოლო მეორე რიცხვი - სიმაღლე. თუ რომელიმე მნიშვნელობა არ არის მითითებული, მაშინ ის `1`-ის ტოლია. ასევე ზოგიერთი შეფარდება დასაშვებია ჩაიწეროს ერთი რიცხვით. მაგალითად, `2/1` შეიძლება ჩაიწეროს როგორც `0.5`, ეს მისცემს იგივე შედეგს.
`auto && შეფარდება`	თუ ასპექტის შეფარდება მოდის ერთად საკვანძო სიტყვასთან `auto` (მაგალითი: `auto` `1/2`), მაშინ შერჩეული იქნება მითითებული შეფარდება, მაგრამ ჩანაცვლებადი ელემენტებისთვის (როგორიცაა სურათები და ვიდეოები) საკუთარი შეფარდებით გამოყენებული იქნება მხოლოდ ის.

მაგალითი

მოდით, ღილაკისთვის დავაყენოთ ავტომატური ასპექტის შეფარდება:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

მაგალითი

ახლა კი მოდით ღილაკისთვის დავაყენოთ ასპექტის შეფარდება როგორც 1/2:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

იხილეთ აგრეთვე

თვისება object-fit,
რომელიც სკალირებს ელემენტებს