Tỷ lệ

Sử dụng các phần tử giả đã tạo để làm cho một phần tử duy trì tỷ lệ khung hình mà bạn chọn. Hoàn hảo để xử lý phản hồi video hoặc nhúng trình chiếu dựa trên chiều rộng của trang gốc.

Trên trang này

Về

Sử dụng trình trợ giúp tỷ lệ để quản lý tỷ lệ co của nội dung bên ngoài như <iframe>s, <embed>s, <video>s và <object>s. Các trình trợ giúp này cũng có thể được sử dụng trên bất kỳ phần tử con HTML tiêu chuẩn nào (ví dụ: a <div>hoặc <img>). Các phong cách được áp dụng từ lớp cha .ratiotrực tiếp cho trẻ.

Tỷ lệ khung hình được khai báo trong bản đồ Sass và được bao gồm trong mỗi lớp thông qua biến CSS, điều này cũng cho phép tỷ lệ khung hình tùy chỉnh .

Mẹo chuyên nghiệp! Bạn không cần frameborder="0"trên <iframe>s của mình vì chúng tôi ghi đè điều đó cho bạn trong Khởi động lại .

Thí dụ

Gói bất kỳ nhúng nào, chẳng hạn như <iframe>, trong phần tử mẹ với .ratiovà một lớp tỷ lệ khung hình. Phần tử con ngay lập tức được định kích thước tự động nhờ bộ chọn phổ quát của chúng tôi .ratio > *.

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

Tỷ lệ khía cạnh

Tỷ lệ khung hình có thể được tùy chỉnh với các lớp bổ trợ. Theo mặc định, các lớp tỷ lệ sau được cung cấp:

1x1

4x3

16x9

21x9

<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>

Tỷ lệ tùy chỉnh

Mỗi .ratio-*lớp bao gồm một thuộc tính tùy chỉnh CSS (hoặc biến CSS) trong bộ chọn. Bạn có thể ghi đè biến CSS này để tạo tỷ lệ khung hình tùy chỉnh nhanh chóng bằng một số phép toán nhanh.

Ví dụ: để tạo tỷ lệ khung hình 2x1, hãy đặt --bs-aspect-ratio: 50%trên .ratio.

2x1

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

Biến CSS này giúp bạn dễ dàng sửa đổi tỷ lệ khung hình giữa các điểm ngắt. Sau đây là 4x3 để bắt đầu, nhưng thay đổi thành 2x1 tùy chỉnh tại điểm ngắt trung bình.

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

4x3, sau đó là 2x1

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

Bản đồ Sass

Bên trong _variables.scss, bạn có thể thay đổi tỷ lệ khung hình mà bạn muốn sử dụng. Đây là $ratio-aspect-ratiosbản đồ mặc định của chúng tôi. Sửa đổi bản đồ theo ý muốn và biên dịch lại Sass của bạn để đưa chúng vào sử dụng.

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