Redimensionner une image en utilisant Javascript dans Opera Browser

J'espère que quelqu'un peut aider avec ce problème bizarre que j'ai avec le navigateur Opera, j'ai la version 11 bêta installée, mais je suspecte un problème commun dans Opera. Le site Web et la page en question sont http://www.amigaos.net/index.html.Redimensionner une image en utilisant Javascript dans Opera Browser

Au bas du corps du code HTML, j'ai le code suivant qui redimensionne les 3 images que vous voyez sur cette page web en fonction de la largeur de la fenêtre au chargement de la page. Dans Safari et FireFox le code fonctionne très bien, mais dans Opera les lignes suivantes qui impliquent le redimensionnement de la largeur et la hauteur d'une image ne fonctionne pas:

document.getElementById('img1').width = '475'; 
document.getElementById('img1').height = '375';

Voici le code complet (désolé, au sujet de la mise en page, stackoverflow n'a pas formaté retours chariot correctement)

<script type="text/javascript"> 
function GetWidth() 
{ 
    var x = 0; 
    if (typeof window.innerWidth != 'undefined') 
    { 
    x = window.innerWidth; 
    } 
    else if (document.documentElement && document.documentElement.clientHeight) 
    { 
    x = document.documentElement.clientWidth; 
    } 
    else if (document.body) 
    { 
    x = document.getElementsByTagName('body')[0].clientWidth; 
    } 
    return x; 
} 

width = GetWidth(); 

if (width>=1680) 
{ 
    document.getElementById('img1').width = '475'; 
    document.getElementById('img1').height = '375'; 
    document.getElementById('img2').width = '475'; 
    document.getElementById('img2').height = '375'; 
    document.getElementById('img3').width = '475'; 
    document.getElementById('img3').height = '375'; 
} 
else if ((width>800) && (width<=1280)) 
{ 
    document.getElementById('img1').width = '300'; 
    document.getElementById('img1').height = '235'; 
    document.getElementById('img2').width = '300'; 
    document.getElementById('img2').height = '235'; 
    document.getElementById('img3').width = '300'; 
    document.getElementById('img3').height = '235'; 
} 
else if (width<=800) 
{ 
    document.getElementById('img1').width = '225'; 
    document.getElementById('img1').height = '195'; 
    document.getElementById('img2').width = '225'; 
    document.getElementById('img2').height = '195'; 
    document.getElementById('img3').width = '225'; 
    document.getElementById('img3').height = '195'; 
} 
</script>

Source

2010-12-01 Richard Lake

fyi: Est-ce que le bouton de l'éditeur de texte contient un tas de 1 et de 0? Hilight votre code et appuyez sur celui-ci pour le formater correctement. –

Il ne fonctionne pas non plus lors du redimensionnement de la fenêtre de mon navigateur. –

au lieu de faire la largeur et les attributs de hauteur, je pense que vous pouvez simplement définir la largeur: 33% via CSS et ont la mise à l'échelle se fasse automatiquement, quelle que soit la taille de la fenêtre du navigateur. Meilleure solution que d'essayer d'utiliser javascript, à mon humble avis.

Voici un tutoriel simple: http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

Source

2010-12-01 21:31:16

vous faites de cette façon trop compliquée. Je ne pense pas que votre problème soit spécifique au navigateur, il vous suffit de recoder votre script.

Premier. Je recommanderais d'utiliser des pourcentages .. Je ne sais pas comment vous allez deviner la largeur du navigateur des visiteurs en pixels. Disons que vos trois images redimensionnables représentent 20% de la largeur de votre navigateur. Ainsi, votre css serait:

#img1, #img2, #img3 { 
    width: 20%; 
}

maintenant que votre dit que vos css images sont 20% du total avec, vous êtes bon d'ajouter quelques js. Gardez à l'esprit que le pourcentage sera celui de son conteneur externe.

<script type=text/javascript"> 
    function resizeImages() { 
    document.getElementById('img1').style.height = (document.body.clientHeight - 100) * 0.2; 
    document.getElementById('img2').style.height = (document.body.clientHeight - 100) * 0.2; 
    document.getElementById('img3').style.height = (document.body.clientHeight - 100) * 0.2; 
    } 
</script>

et surtout .. appeler votre fonction:

Ajouter à votre balise body:

<body onresize="resizeImages()">

-boom .. vous avez terminé.

Source

2010-12-01 21:51:18

(note: l'attribut onresize peut être ajouté à n'importe quelle div .. bien que je n'ai jamais testé ça) –

Redimensionner une image en utilisant Javascript dans Opera Browser

Répondre

Questions connexes