Image redimensionner à adapter à l'écran

J'ai créé ce code de redimensionner des photos/images pour les adapter à l'écran, compte tenu de l'espace disponible pour la barre de navigation.

Le script feux sur du chargement de l'image et sur la navigation, cliquez sur.

Quelqu'un aurait-il des suggestions à faire mieux et à assurer la compatibilité du navigateur?

HTML

$(document).ready(function(){
 $("#photo").load(function(){
  resize();
 });

 $(".navigation img").click(function(){
  var imgPath = $(this).attr("src"); 
  $("#photo").attr({ src: imgPath });
  resize();
  return false;
       });
   });

Javascript

resize = function() {

    var borderVt=150; //value based on css style. bottom bar + padding of photoContain
    var borderHz=40; //value based on css style photoContain padding

    $("#photo").css("width", "auto").css("height", "auto"); //Remove existing CSS
    $("#photo").removeAttr("width").removeAttr("height"); //Remove HTML attributes   

    var origSizeW = $("#photo").width();
    var origSizeH = $("#photo").height();
    var ratioVt=(origSizeW/origSizeH);
    var ratioHz=(origSizeH/origSizeW);
    var winW = $(window).width();
    var winH = $(window).height();
    var screenSizeW=Math.round(winW-borderHz);
    var screenSizeH=Math.round(winH-borderVt);

    if (origSizeW>=origSizeH){

     var newHeight = Math.round(screenSizeW*ratioHz);
     if (newHeight <= screenSizeH){
      $("#photo").css("width", screenSizeW); //Set new width
      $("#photo").css("height", newHeight);
      }
     else{
      $("#photo").css("height", screenSizeH);
      }

    }
    else{
    $("#photo").css("height", screenSizeH); //Set new height
    }
  };

InformationsquelleAutor alberto | 2010-04-02

11

Je sais que cette question est bien vieux, mais voici un solution (même si je suis sûr que l'OP fonctionne très bien aussi):

Ce plugin jQuery qui semble faire exactement ce dont vous avez besoin:
http://code.google.com/p/jquery-imagefit-plugin/

si vous effectuez sur un 100% à hauteur de 100% de la largeur de l'élément:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js"></script>
<div style="width: 100%; height: 100%">
    <img  id="h5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<script>
    jQuery('#h5').bind('load', function() {
        jQuery('div').imagefit();
    });
</script>
```
(démo: http://jsfiddle.net/nottrobin/9Pbdz/)
- Meilleure solution. Je vous remercie.
- J'ai jusqu'a voté, mais depuis que je ne suis pas le seul, qui a créé la question, en premier lieu, je ne peux pas l'accepter.
- Juste une question, est ce que cette méthode de réduire la quantité de données à envoyer au client, lorsque l'image a une taille plus petite?
InformationsquelleAutor Robin Winslow

Essayez d'utiliser le jQuery-Document d'information plugin. Vous pourriez être en mesure de le modifier pour faire ce que vous avez besoin. Voici un exemple:

<script src="jquery.backgrounder.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('#my_background').backgrounder({element : 'body'});
  });
</script>

[...]

<div id="my_background"><img src="birthday.jpg" alt="Birthday party" /></div>

InformationsquelleAutor Callmeed

J'ai écrit un plugin!

jQuery.fn.positionMe = function () {
    var oH = $(window).height();
    var oW = $(window).width();
    var iH = this.outerHeight();
    var iW = this.outerWidth();

    //When the image is too small so, do nothing
    if(iW>oW && iH>oH){

        //Otherwise, proportionate the image relative 
        //to its container
        if(oH/iH > oW/iW){
            this.css("width", oW);
            this.css("height", iH*(oW/iW))
        } else {
            this.css("height", oH);
            this.css("width", iW*(oH/iH));
        }

    }
    return this;
}

Utilisation:

$("#photo").positionMe();

InformationsquelleAutor mukama

Voici comment je le fais:

 jQuery(document).ready(function($) {
      $('.wp-post-image').height($(window).height());
 });

InformationsquelleAutor Scott Paterson

1

Me semble bon, mais je vous propose de fixer le redimensionner la fonction jQuery Redimensionner la Fenêtre du gestionnaire d'Événement. Puis l'image s'allonge et se rétrécit avec la page.

InformationsquelleAutor kim3er

-1

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||document.body.offsetWidth||window.screen.availWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||document.body.offsetHeight||window.screen.availHeight;

function resize() {

    a=document.getElementsByClassName(' scale');
    for(var i=0; i<a.length; i++){

        var aW = a[i].offsetWidth;
        var aH = a[i].offsetHeight;
        var d=w/h;
        var mT, mL;

        if (d>=1.5){
            aW=w;
            aH=w-(w*(34/100));
            mT=(aH/2)*-1;   
            mL=(aW/2)*-1;   
        } else {
            aH=h;
            aW=h+(h*(66/100));
            mT=(aH/2)*-1;
            mL=(aW/2)*-1;
        }

        a[i].style.height=aH+'px';
        a[i].style.width=aW+'px';
        a[i].style.marginTop=mT+'px';
        a[i].style.marginLeft=mL+'px';  
    }
}

au-dessus de code javascript. Centre-monter les images dans tous les navigateurs. Il suffit de trouver le ratio de l'ur de l'image c'est à dire de l'image-taille 1500 x 1000= 1.5 maintenant utiliser ce rapport pour comparer.
Même si cela peut répondre à la question, il est toujours une bonne idée de mettre du texte dans votre réponse à expliquer ce que vous faites. Lire comment écrire une bonne réponse.

InformationsquelleAutor Siddharth Singh

Vous devez vous connecter pour publier un commentaire.