Redimensionnement dynamique de l'image

Question

J'ai une image sur une page Web qui doit être étirée pour s'adapter à l'espace disponible dans la fenêtre tout en conservant sa proportion. Voici ce que j'ai:

http://www.lammypictures.com/test/

Je voudrais la grande image pour étirer proportionnellement pour correspondre à la hauteur et la largeur du navigateur, moins la taille des divs à gauche et en bas.

Donc le problème est vraiment double; d'abord j'ai besoin d'obtenir la hauteur et la largeur max moins le lien et les barres d'image, d'autre part, j'ai besoin de redimensionner l'image sur un redimensionnement du navigateur tout en conservant les proportions.

Toute aide serait grandement appréciée.

Vive CIP

Answer 1

Vous pouvez essayer d'utiliser jQuery effet d'échelle ui:

$(document).ready(function() { 

    resizeImage(); // initialize 

    $(window).resize(function() { 
     resizeImage(); // initialize again when the window changes 
    }); 

    function resizeImage() { 
     var windowHeight = $(window).height() - $('#nav').height(), 
      windowWidth = $(window).width(), 
      percentage = 0; 

     if (windowHeight >= windowWidth) { 
      percentage = (windowWidth/$('#image').width()) * 100; 
     } 
     else { 
      percentage = (windowHeight/$('#image').height()) * 100; 
     } 

     $('#image').effect('scale', { percent : percentage }, 1); 
    }; 
}); 

testé et fonctionne très bien, cependant, quelques modifications nécessaires peut-être obtenir juste la façon dont vous le souhaitez.

Answer 2

Vous pouvez tout simplement pas configurer les attributs de largeur élément d'image et de la hauteur, et écrire les styles suivants:

.hentry img { max-width: 100%; } 

Et il diminuera par rapport au côté minimum.

P.S. Mais pas en position: absolue; bloc qui n'a pas de taille. Configurez le bloc parent sur le positionnement relatif.