คุณสมบัติ aspect-ratio

คุณสมบัติ aspect-ratio กำหนดการจัดเรียง ขององค์ประกอบตามแนวแกนตั้งฉากสำหรับบล็อก flex และตามแนวแกนนอนสำหรับ grid ใช้กับองค์ประกอบแม่

ไวยากรณ์

ตัวเลือก {
	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,
ซึ่งปรับขนาดองค์ประกอบ