déclinaison de ratios responsives

exemples d'éléments HTML avec
ratio paramétrable via CSS, conservé en responsive,
et toutes les possibilités de centrages horizontaux et verticaux
en test, OK sur Mac Firefox 48 et Chrome 49
bonus : version avec tailles minimales alliées avec fluidité typo - et imprimable

RATIOS apparence avec contenu avec
conteneur
vide
apparence avec contenu avec
conteneur
vide
en mosaïque :
avec
9 modes
d'alignement		  
  1. 1/1 ~ les paires
  2. 3/4 ~ les chiffres
  3. 4/3 ~ R. Desnos
  4. 1/1, 3/4 et 4/3 ~ les emojicons
  
en mosaïque :
avec centrages
horizontal
et vertical		  
  1. 1/1 ~ les paires
  2. 3/4 ~ les chiffres
  3. 4/3 ~ R. Desnos
  4. 1/1, 3/4 et 4/3 ~ les emojicons
  
en solo ou trio :
avec centrages
horizontal
et vertical
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
en solo ou trio :
avec
positionnement
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
  1. 1/1
  2. 3/4
  3. 4/3
  4. 1/1, 3/4 et 4/3
en solo ou trio :
en pos. absolue
  1. 1/1
  2. 1/1, 3/4 et 4/3
  1. 1/1
  2. 1/1, 3/4 et 4/3
  1. 1/1
  2. 1/1, 3/4 et 4/3
en solo ou trio :
en pos. fixée
  1. 1/1
  2. 1/1, 3/4 et 4/3
  1. 1/1
  2. 1/1, 3/4 et 4/3
  1. 1/1
  2. 1/1, 3/4 et 4/3
Gaëtan Interfacteur, 2016 - et sur Github