Artikel ini dari bulan Julai 2013 menerangkan kaedah menggunakan elemen psuedo untuk mengekalkan nisbah aspek elemen, walaupun skala.
Inilah Sass mixin yang sedikit memudahkan matematik.
@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 menganggap anda akan meletakkan elemen dengan kelas kandungan di dalam blok awal anda. Seperti ini:
insert content here this will maintain a 16:9 aspect ratio Menggunakan mixin semudah:
.sixteen-nine ( @include aspect-ratio(16, 9); )Keputusan:
.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; )Demo
Berikut adalah demo yang menunjukkan tindakan di atas. Animasi ditambahkan untuk menunjukkan elemen mengekalkan nisbah aspek yang ditetapkan semasa ukurannya.
Lihat Demo Nisbah Aspek Pen oleh Sean Dempsey (@seanseansean) di CodePen
Terima kasih kepada Sean Dempsey (@thatseandempsey) untuk yang ini!