mardi, juillet 11, 2017

Ajuster l'image en css

Pour ajuster l'image en css, nous pouvons prendre tous les cas les plus rencontré et fixer les valeurs. En exemple pour le piano du poste précédent :

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

if ( largeurecran == 480 && hauteurecran == 320 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=33;
}
}

if ( largeurecran == 320 && hauteurecran == 480 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=59;
}
}

if ( largeurecran == 360 && hauteurecran == 640 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=67;
}
}

if ( largeurecran == 640 && hauteurecran == 360 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=30;
}
}

if ( largeurecran == 768 && hauteurecran == 1024 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=53;
}
}

if ( largeurecran == 1024 && hauteurecran == 768 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=35.5;
}
}


if ( largeurecran == 800 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=61;
}
}
if ( largeurecran == 1280 && hauteurecran == 800 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=32;
}
}

if ( largeurecran == 980 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=52.5;
}
}
if ( largeurecran == 1280 && hauteurecran == 980 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=36;
}
}

if ( largeurecran == 1280 && hauteurecran == 600 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=27.3;
}
}
if ( largeurecran == 600 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=75;
}
}


if ( largeurecran == 1920 && hauteurecran == 900 )
{
for(var b4= 15; b4 < 34; b4++)
{
l[b4][4]=27.3;
}
}
if ( largeurecran == 900 && hauteurecran == 1920 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=75;
}
}

if ( largeurecran == 1280 && hauteurecran == 1024 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=36.1;
}
}

 Mais nous pouvons faire plus simple en identifiant en premier si la largeur est plus grande que la hauteur et placer une règle par rapport à la première valeur définie qui représente l'égalité de dimension

if ( largeurecran < hauteurecran  )
... 

if ( largeurecran > hauteurecran  )

... 

Comme  la référence de hauteur de base est 13%, nous allons prendre un repère légèrement au dessus à 14%

Ce qui taillé à la louche donne :

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


if ( largeurecran > hauteurecran )
{
var rapportecran = largeurecran / hauteurecran;
var deltaecran = 43.2 - (( rapportecran - 0.8) *14);
console.log(deltaecran);
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=deltaecran;
}
}

if ( largeurecran < hauteurecran )
{
var rapportecran =  hauteurecran / largeurecran;
var deltaecran = 43.2 + (( rapportecran - 0.8) *14);
console.log(deltaecran);
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=deltaecran;
}


 Ces valeurs sont à ajuster pour chaque cas, plus la valeur ôtée à rapportecran est proche de 1, plus le résultat est correcte


https://addons.mozilla.org/en-US/firefox/addon/lecjoa/


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

Aucun commentaire: