Artikel dari Juli 2013 ini menjelaskan metode penggunaan elemen psuedo untuk mempertahankan rasio aspek elemen, meskipun skalanya.
Ini adalah mixin Sass yang sedikit menyederhanakan matematika.
@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 mengasumsikan Anda akan menumpuk elemen dengan kelas konten 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); )Hasil:
.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 demo yang menunjukkan cara kerja kode di atas. Animasi ditambahkan untuk menunjukkan elemen yang mempertahankan rasio aspek yang ditetapkan saat ukurannya diubah.
Lihat Demo Pen Maintain Aspect Ratio oleh Sean Dempsey (@seanseansean) di CodePen.
Terima kasih kepada Sean Dempsey (@thatseandempsey) untuk yang satu ini!