Razão intrínseca menos mixin

Em 2009, Thierry Koblentz escreveu sobre Intrinsic Ratios , especificamente no que diz respeito a vídeos. Agora eles são usados ​​em qualquer lugar, ou deveriam ser, graças ao RWD. Eu me peguei sacando uma calculadora com muita frequência, então fiz um mixin simples para fazer as contas para mim.

The Mixin

.ir(@width, @ratio) {
    // calculate ratios by dividing width/height
    // so a 16x9 box would be 16/9 = 1.777777778
    width: unit(@width, ~'%');
    height: 0;
    padding-bottom: unit(@width / @ratio, ~'%');
}

.ir(@width, @ratio-width, @ratio-height) {
    .ir(@width, unit(@ratio-width) / unit(@ratio-height));
}

Uso

Você pode declarar sua caixa usando apenas dois parâmetros, se assim escolher. Simplesmente, a largura na qual você deseja que a caixa apareça e a proporção que ela deve manter. Há muita flexibilidade em como você passa seus parâmetros, graças a @lettertwo e @matthewwithanm.

.ir(16.6667%; 430px; 380px)e .ir(16.6667%, 430/380)gera uma caixa em 430 por 380 que é 1/6 da largura principal deslocada.

.ir(25%, 1.6) cria uma caixa de 8 por 5 que é 1/4 da largura principal deslocada

.ir(33.3334%, 8, 5) cria uma caixa de 8 por 5 que é 1/3 da largura principal deslocada

.ir(100%, 16/9) cria uma caixa de 16 por 9 que é 100% da largura principal deslocada

Eu adicionei ao meu próprio LESS Toolset onde você é bem-vindo para colocar seu garfo.

CSS

Usando o primeiro exemplo 8×5 acima, você acaba com este CSS.

width: 25%;
height: 0;
padding-bottom: 15.625%;