อัตราส่วน

เกี่ยวกับ

ใช้ตัวช่วยอัตราส่วนเพื่อจัดการอัตราส่วนกว้างยาวของเนื้อหาภายนอก เช่น<iframe>s, <embed>s, <video>s และ<object>s ตัวช่วยเหล่านี้ยังสามารถใช้กับองค์ประกอบย่อย HTML มาตรฐานใดก็ได้ (เช่น a <div>หรือ<img>) สไตล์ถูกนำไปใช้จาก.ratioคลาสพาเรนต์กับเด็กโดยตรง

อัตราส่วนกว้างยาวได้รับการประกาศในแผนที่ Sass และรวมอยู่ในแต่ละคลาสผ่านตัวแปร CSS ซึ่งช่วยให้กำหนดอัตราส่วนกว้างยาวได้

ตัวอย่าง

ตัดการฝังใดๆ เช่น an <iframe>ในองค์ประกอบพาเรนต์ด้วย.ratioและคลาสอัตราส่วนกว้างยาว องค์ประกอบย่อยในทันทีจะถูกปรับขนาดโดยอัตโนมัติด้วยตัวเลือกสากลของ.ratio > *เรา

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

อัตราส่วนภาพ

อัตราส่วนภาพสามารถปรับแต่งได้ด้วยคลาสตัวปรับแต่ง โดยดีฟอลต์ คลาสอัตราส่วนต่อไปนี้จะถูกจัดเตรียม:

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

อัตราส่วนที่กำหนดเอง

แต่ละ.ratio-*คลาสมีคุณสมบัติ CSS แบบกำหนดเอง (หรือตัวแปร CSS) ในตัวเลือก คุณสามารถแทนที่ตัวแปร CSS นี้เพื่อสร้างอัตราส่วนกว้างยาวที่กำหนดเองได้ทันทีด้วยการคำนวณอย่างรวดเร็วในส่วนของคุณ

ตัวอย่างเช่น หากต้องการสร้างอัตราส่วนภาพ 2x1 ให้ตั้งค่า--bs-aspect-ratio: 50%ไฟล์.ratio.

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

ตัวแปร CSS นี้ทำให้ง่ายต่อการแก้ไขอัตราส่วนกว้างยาวข้ามจุดสั่งหยุด ต่อไปนี้เป็น 4x3 เพื่อเริ่มต้น แต่เปลี่ยนเป็น 2x1 แบบกำหนดเองที่เบรกพอยต์ขนาดกลาง

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

แผนที่ Sass

ภายใน_variables.scssคุณสามารถเปลี่ยนอัตราส่วนกว้างยาวที่คุณต้องการใช้ นี่คือ$ratio-aspect-ratiosแผนที่ เริ่มต้นของเรา ปรับเปลี่ยนแผนที่ตามที่คุณต้องการและคอมไพล์ Sass ของคุณใหม่เพื่อนำไปใช้

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);