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.
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 .ratio
trự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 .
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 .ratio
và 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:
<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
.
<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
}
}
<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-ratios
bả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%)
);