Para poder usar el ratio solo tenemos que incluirlo dentro
de .content para que tenga posicion absoluta.
Adjuntamos los paddings-tops para los ratios.
Si no existe tu ratio puedes crear nuevos ratios haremos
include. @include ratio(ancho, alto);
| helper | @include ratio(16, 9); |
|---|---|
.rat-main |
pt:
133.25%
Es el ratio más usado en la web
@include ratio(800, 1066);
|
.rat-16-9 |
pt: 56.25%
|
.rat-21-9 |
pt:42.85714%
|
.rat-1-1 |
pt: 100%
|
.rat-2-1 |
pt: 50%
|
.rat-2-3 |
pt: 150% --real , pero ahora falso
|
.rat-3-2 |
pt: 66.66667%
|
.rat-3-4 |
pt:
133.33333%%
|
.rat-4-3 |
pt: 75%%
|
<div class=" rat-2-1">
<div class="rat-content"> contenido </div>
</div>
@mixin ratio($width, $height) {
position: relative;
overflow: hidden;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100% ;
}
>.rat-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}