Bài viết này từ tháng 7 năm 2013 mô tả một phương pháp sử dụng phần tử psuedo để duy trì tỷ lệ khung hình của phần tử, ngay cả khi nó chia tỷ lệ.
Đây là một mixin Sass giúp đơn giản hóa phép toán một chút.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )Mixin giả định rằng bạn sẽ lồng một phần tử với lớp nội dung bên trong khối ban đầu của bạn. Như thế này:
insert content here this will maintain a 16:9 aspect ratio Sử dụng mixin dễ dàng như sau:
.sixteen-nine ( @include aspect-ratio(16, 9); )Kết quả:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Bản giới thiệu
Đây là bản demo cho thấy đoạn mã trên đang hoạt động. Hoạt ảnh được thêm vào để hiển thị phần tử duy trì tỷ lệ khung hình được chỉ định khi nó thay đổi kích thước.
Xem Bản trình diễn về tỷ lệ khung hình duy trì bút của Sean Dempsey (@seanseansean) trên CodePen.
Cảm ơn Sean Dempsey (@thatseandempsey) vì điều này!