คุณสมบัติ aspect-ratio ของ CSS

คำอธิบายและวิธีใช้

aspect-ratio คุณสมบัตินี้ยอมรับให้คุณกำหนดความกว้างและความสูงขององค์ประกอบ。

ถ้าตั้งค่า aspect-ratio และ width คุณสมบัตินี้ ความสูงจะปรับตัวตามอัตราส่วนที่กำหนด

เพื่อที่จะเข้าใจคุณสมบัตินี้ดีขึ้น aspect-ratio คุณสมบัตินี้ ดูตัวอย่างที่นี้。

คำเตือน：ใช้ในโครงสร้างตอบสนองต่ออุปกรณ์ aspect-ratio คุณสมบัตินี้ใช้เมื่อขนาดองค์ประกอบมีการเปลี่ยนแปลงตามเวลา คุณอยากให้ความกว้างและความสูงมีอัตราส่วนตามกัน。

ตัวอย่าง

ตัวอย่าง 1

เพิ่มอัตราส่วนกว้างสูงให้กับองค์ประกอบ

div {
  aspect-ratio: 3 / 2;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ถ้าขนาดองค์ประกอบ div ต้องการการเปลี่ยนแปลงaspect-ratio คุณสมบัตินี้มีประโยชน์มากในการควบคุมอัตราส่วนกว้างสูงขององค์ประกอบ div อย่างง่ายดาย。เช่น ในคลังภาพคุณอยากให้ขนาดองค์ประกอบ div แบบอิสระเพื่อที่จะสามารถปรับเปลี่ยนได้ตามอุปกรณ์ทั้งหมด แต่ขณะเดียวกันยังต้องการที่จะทำให้ความสูงสูงสามารถปรับตัวตามอัตราส่วนกว้างสูง：

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>hills</div>
  <div>Cinque Terre</div>
</div>

ทดลองด้วยตัวเอง

CSS ภาษา

aspect-ratio: number/number|initial|inherit;

ค่าทางคุณสมบัติ

ค่า คำอธิบาย
number ตัวเลขที่หนึ่งกำหนดค่ากว้างของอัตราส่วนกว้างสูง。
number

ตัวเลขที่สองกำหนดค่าความสูงของอัตราส่วนกว้างสูง。

ใช้งานเลือกตั้ง. ถ้ายังไม่ถูกตั้งค่า ความสูงโดยเริ่มต้นคือ 1。
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู: initial。
inherit จากองค์ประกอบพ่อของตัวนี้ ในการต่อรองคุณสมบัตินี้. ดู: inherit。

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: auto
การต่อรอง: ไม่
การสร้างอนุบาล: สนับสนุน. ดูบทความที่:คุณสมบัติที่เกี่ยวข้องกับอนุบาล。
รุ่น： CSS3
JavaScript ภาษา： object.style.aspectRatio="16/9"

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้แสดงค่ารุ่นที่เซิร์ฟเวอร์สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome Edge Firefox Safari Opera
88 88 89 15 74

หน้าที่เกี่ยวข้อง

ตัวอย่าง：CSS มอดูลการจัดเก็บกริด

อ้างอิง：CSS Object-fit รายละเอียด

อ้างอิง：CSS Object-position รายละเอียด