Redimensionnement automatique de deux images dans un div lorsque la largeur du navigateur change

Question

J'ai examiné plusieurs réponses de personnes différentes à ce problème mais elles ne représentent qu'une seule image. J'ai un problème avec les deux images que j'ai placées dans mon en-tête, quand je redimensionne mon navigateur, je veux qu'elles soient réduites avec cela afin qu'elles ne déplacent pas tout mon site.

je l'ai hébergé dans dropbox afin que vous puissiez voir ce que mon problème est: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html

également un autre problème im avoir est un attacher le pied de page à partir du bas de l'écran et de le mettre sous le corps afin que les utilisateurs doivent défiler vers le bas. p.s J'ai attaché le pied de page au fond il y a plusieurs mois et j'ai oublié comment l'annuler.

CODE POUR DÉSOLÉ INCROYABLEMENT MESSY

merci à l'avance

Arran, 16

Answer 1

Voici comment je le ferais. Tout d'abord, stylisez chaque image en utilisant CSS pour avoir width:100% et height:auto. Cela les fait répondre aux tailles de leurs conteneurs. Perdez ces attributs width et height de la balise img - je ne suis même pas sûr que ceux-ci sont plus valides.

Maintenant, voici où la partie intelligente vient. Vos images sont 550px et 298px large, ce qui représente un ratio d'environ 65%: 35%. Lorsque l'en-tête est à son point le plus étroit avant de se rompre, il est à peu près aussi large que la somme des deux. Donc, donnez le conteneur de la grande image max-width:65%, et le conteneur de la petite image divmax-width:35%. De cette façon, lorsque la fenêtre du navigateur est plus petite, les images sont réduites en conséquence - et ne deviennent pas plus grandes qu'elles ne doivent l'être lorsque la fenêtre est large. J'ai essayé sur votre page, et je pense que cela a fonctionné - voir si cela fonctionne pour vous. :)