Ratio CSS

Es un simple framework CSS que facilita la creación de componentes responsivos con relación de aspectos. wiki

Ejemplo HTML:

Sin Ratio CSS

<div>
    <img src="http://placehold.it/620x280" alt="">
</div>

Con Ratio CSS

<div class="ratio ratio-16by9">
    <img src="http://placehold.it/620x280" data-model="width" alt="" class="ratio-item">
</div>

Ejemplo en vivo

• 10x10
• Modelos de relación
• Libros
• Vídeos

Versiones

v1.3.0

Integra nuevos ejemplos.

Ingresa un parámetro @name a la función .ratio, permite nombrar clase de la relación.

Less:

.ratio(12, 13, casa);

Salida:

.ratio.ratio-casa,
.ratio.ratio-casa .ratio-item.action {
  padding-bottom: 108.33333333%;
}

v1.2.1

Agrega tabla de relaciones 10x10

• Relación 1 x 1 - css: .ratio-1by1
• Relación 1 x 2 - css: .ratio-1by2
• Relación 1 x 3 - css: .ratio-1by3
• Relación 1 x 4 - css: .ratio-1by4
• Relación ...
• Relación 4 x 1 - css: .ratio-4by1
• Relación ...
• Relación 10 x 10 - css: .ratio-10by10

v1.2.0

Agregar relaciones de tipo libro:

• De bolsillo
  • css: .ratio-1302by2032
  • Dimensión: 13,02 x 20,32 cm
• Comercial
  • css: .ratio-1524by2286
  • Dimensión: 15,24 x 22,86 cm
• Cuadrado pequeño
  • css: .ratio-1746by1683
  • Dimensión: 17,46 x 16,83 cm
• Vertical estándar
  • css: .ratio-2000by2477
  • Dimensión: 20,00 x 24,77 cm
• Apaisado estándar
  • css: .ratio-2410by2032
  • Dimensión: 24,10 x 20,32 cm
• Apaisado grande
  • css: .ratio-3238by2762
  • Dimensión: 32,38 x 27,62 cm
• Cuadrado grande
  • css: .ratio-3025by3048
  • Dimensión: 30,25 x 30,48 cm
• Revista
  • css: .ratio-2794by2159
  • Dimensión: 27,94 x 21,59 cm

v1.1.0

Ingresar control javascript.

Permite dimensionar la imagen sin perder la relación original, eliminando lo que no cabe dentro del componente. Para lo que ocupa la etiqueta data-media="<proporción>".

v1.0.0

Esta versión incluye las siguientes relaciones:

• 5x3
  • css: .ratio-5by3
  • URL Example: http://placehold.it/500x300&text=5x3
• 3x2
  • css: .ratio-3by2
  • URL Example: http://placehold.it/300x200&text=3x2
• 4x3
  • css: .ratio-4by3
  • URL Example: http://placehold.it/400x300&text=4x3
• 5x4
  • css: .ratio-5by4
  • URL Example: http://placehold.it/500x400&text=5x4
• 14x9
  • css: .ratio-14by9
  • URL Example: http://placehold.it/140x90&text=14x9
• 16x9
  • css: .ratio-16by9
  • URL Example: http://placehold.it/160x90&text=16x9
• 16x10
  • css: .ratio-16by10
  • URL Example: http://placehold.it/160x100&text=16x10
• 17x9
  • css: .ratio-17by9
  • URL Example: http://placehold.it/170x90&text=17x9
• 21x9
  • css: .ratio-21by9
  • URL Example: http://placehold.it/210x90&text=21x9
• 185x100
  • css: .ratio-185by100
  • URL Example: http://placehold.it/185x100&text=185x100
• 239x100
  • css: .ratio-239by100
  • URL Example: http://placehold.it/239x100&text=239x100

Autor

Jonathan Delgado Zamorano [e-mail]

Licencia

Licencia MIT http://opensource.org/licenses/MIT