11564 sujets

JavaScript, DOM et API Web HTML5

Redimensionner des images en fonction de la taille de l'écran

Bonjour,
Nouveau sur ce forum, merci d'avance de votre accueil !

J'essaye de réaliser une fonction qui redimensionne des images en fonctions de la taille de l'écran, en leur conservant leur format homothétique, jusque-là ça va. mais lorsque j'applique ma fonction à une série d'image avec une classe, leur hauteur(par exemple) est bien redimensionnée, mais leur largeur est identique, lorsque j'utilise un id le rapport de redimensionnement est correct ? des idées ? ci-dessous la fonction et l'exemple :


http://www.architectureetbois.com/zoom/resize6_haut.html


function redim(id, para){
 
    var $image = $(id);
    var l2 = $image.width();
    var h2 = $image.height();
 
 
 var l1 = $(window).width();
    var h1 = $(window).height();
 
if(l2>h2){
 var ratio=(h2/l2);  
 
l2=Math.ceil(l1-para);
h2=Math.ceil(l2*ratio);
 
      $image.css({
        'width': l2 + 'px',
        'height': h2 + 'px'
      });
  }
   else {
	    var ratio=(l2/h2);  
	   h2=Math.ceil(h1-para);
l2=Math.ceil(h2*ratio);
      $image.css({
       'width': l2 + 'px',
        'height': h2+ 'px'
 
      });
    }
 
 
}
Modérateur
Bonjour.

Peut-être que parce que quand tu passes une classe tu reçois une collection d'éléments au lieu d'un seul élément?

Sinon avec une construction intelligente en css et les pourcentages, tu peux obtenir le même résultat en plus fluide et efficace, et sans js.
bonjour,

tu devrais pouvoir obtenir ce que tu veux uniquement en CSS (je n'ai pas vérifié). Il suffit de définir uniquement la largeur des images en % en CSS. La hauteur sera automatiquement adaptée.
Une solution à mon code vient d'être fourni qui marche au chargement de la page, par contre onresize ça déforme.



<script>
function redim($image, para){
 
    var $l2 = $image.width();
    var $h2 = $image.height();
 
 
 $l1 = $(window).width();
   $h1 = $(window).height();
 
 
if($l2>$h2){
 ratio=($h2/$l2);  
 
$l2=Math.ceil($l1-para);
$h2=Math.ceil($l2*ratio);
 
      $image.css({
        'width': $l2 + 'px',
        'height': $h2 + 'px'
      });
  }
   else {
	    var ratio=($l2/$h2);  
	   $h2=Math.ceil($h1-para);
$l2=Math.ceil($h2*ratio);
      $image.css({
       'width': $l2 + 'px',
        'height': $h2+ 'px'
 
      });
    }
 
   $('div.texte').html(ratio+" "+$l2+" "+$h2); 
}
 
$(document).ready(function(){
 
/
$('.superbg2').each(function(){ 
    redim($(this),100);
}); 
 
$(window).resize(function() {
$('.superbg2').each(function(){ 
    redim($(this),100);
}); 
});
 
 
});
</script>
Sujet clos
Aller à