jeudi, juillet 13, 2017

Ajuster l'image en css avec px

Bonjour,
Pour ajuster l'image d'une brique visuelle à l'écran en utilisant les px, il faut en premier identifier et mettre en pourcentage la taille de l'écran ou va être affiché l'image.
Nous faisons cela avec le code :

 var largeurecran = screen.width * 0.01;
var hauteurecran = screen.height * 0.01;


Ensuite nous indiquons, les valeurs en px mais en faisant comme si celles-ci étaient prévues pour un écran de 100px de haut et de large, dans nos briques visuelles
En exemple pour le fond d'écran du piano
l[57] = [100, 60, "#975401", 0, 10, 2 * largeurecran +"px", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];

Enfin, nous modifions le générateur de briques visuelles pour que celui-ci redimensionne toutes les briques à la taille de l'écran en ajoutant les facteurs de l'écran récupérés dans largeurecran et hauteurecran
En exemple pour la largeur :
nouveauin.style.width = (l[uui][0]) * largeurecran +"px";

Ce qui nous donne le code complet pour dessiner un piano en générant des briques visuelles :

var largeurecran = screen.width * 0.01;
var hauteurecran = screen.height * 0.01;

var l={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[],
49:[],50:[],51:[],52:[],53:[],54:[],55:[],56:[],57:[],58:[]};

var vam = [3.8, 30, "black", 3, 13, "2px", "absolute", 0.99, "rotate(0deg)", "height 1s", 85, 10];

var vam1 = [3, 7.7, 17.1, 21.8, 26.5, 35.9, 40.6, 50, 54.7, 59.4, 68.8, 73.5,
82.9, 87.6, 92.3, 0.6, 5.3, 10, 14.7, 19.4, 24.1, 28.8, 33.5, 38.2, 42.9,
 47.6, 52.3, 57, 61.7, 66.4, 71.1, 75.8, 80.5, 85.2, 89.9, 94.6, 0.6,
 6.8, 11.5, 14.7, 20.9, 25.6, 30.3, 33.5, 39.7, 44.4, 47.6, 53.8, 58.5,
 63.2, 66.4, 72.6, 77.3, 80.5, 86.7, 91.4, 96.1, 0];
var vam2 = ["white", "#975401"];
var vam3 = [2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9];

for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[0];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=43;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}



l[57] = [100, 60, "#975401", 0, 10, 2 * largeurecran +"px", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];





l= {
  1: l[0], 2: l[1], 3: l[2], 4: l[3], 5: l[4], 6: l[5], 7: l[6], 8: l[7], 9: l[8], 10: l[9], 11: l[10],
12: l[11],13: l[12], 14: l[13], 15: l[14], 16: l[15], 17: l[16], 18: l[17], 19: l[18], 20: l[19], 21: l[20],
22: l[21], 23: l[22], 24: l[23],25: l[24], 26: l[25], 27: l[26], 28: l[27], 29: l[28], 30: l[29], 31: l[30],
32: l[31], 33: l[32], 34: l[33], 35: l[34], 36: l[35], 37: l[36], 38: l[37], 39: l[38], 40: l[39], 41: l[40],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
52: l[51], 53: l[52], 54: l[53], 55: l[54], 56: l[55], 57: l[56], 58: l[57], 59: l[58]
}

for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");
nouveauin.style.width = (l[uui][0]) * largeurecran +"px";
nouveauin.style.height = (l[uui][1]) * hauteurecran +"px";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=(l[uui][3]) * largeurecran +"px";
nouveauin.style.marginTop=(l[uui][4]) * hauteurecran +"px";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][10]+"px";
boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();
}




Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.

Aucun commentaire: