En Boy Oranı Karışımını Koru - CSS Hileleri

Temmuz 2013 tarihli bu makale, ölçeklenirken bile öğelerin en boy oranını korumak için psuedo öğelerini kullanma yöntemini açıklamaktadır.

İşte matematiği biraz basitleştiren bir Sass karışımı.

@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, ilk bloğunuzun içindeki içerik sınıfıyla bir öğeyi yerleştireceğinizi varsayar. Böyle:

 insert content here this will maintain a 16:9 aspect ratio

Mixin'i kullanmak şu kadar kolaydır:

.sixteen-nine ( @include aspect-ratio(16, 9); )

Sonuç:

.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; )