Maronniers CSS : image resizing et boîtes auto-développantes
Bonjour à tous,
J'ai très honte de poser la question tant ces deux sujets doivent être fréquents mais je ne parviens pas à trouver de réponse claire dans la FAQ, ni sur le web en général, et cela m'étonne quand on sait combien ces problèmes doivent être fréquents et récurrents. J'apprécierais toute solution, bien sûr, mais je me satisferais dans tous les cas d'un « Si, si, c'est possible. Cherche encore. » ou d'un « Non. C'est une lacune connue des CSS. Il faut utiliser du script ».
1. Redimensionnement :
Le cas le plus simple : j'ai une page avec un en-tête, pied de page, et une seule photo en plein milieu. L'image choisie peut varier, mais elle fait toujours 1024 pixels de large. Sa hauteur en revanche, peut varier entre 680 et 700 pixels environ.
Ma question est : est-il possible de faire en sorte que lorsque je redimensionne la fenêtre, la photo s'adapte d'elle-même à la plus petite des deux dimensions (horizontale ou verticale) tout en conservant ses proportions (ratio 1:1) ? Il est facile de le faire pour une seule dimension avec un width: 100%; height: auto, par exemple, ou de l'étirer jusqu'aux bordures de son container quelles qu'elles soient, mais faire les trois à la fois semble relever de la quadrature du cercle…
2. Boîtes auto-développantes :
C'est plus ou moins lié au premier point et c'est tout simplement le problème des entêtes et pieds de page : si je veux que mon pied de page soit toujours en bas de l'écran, je peux mettre un height: 100% à <body> et positionner en absolu mon pied de page avec un bottom: 0. Et si je veux éviter que mon pied de page soit écrasé par le contenu de la page une fois remplie, il me suffit d'ajouter une marge ou un padding correspondant à sa hauteur.
Le problème est qu'alors, je suis obligé de fixer la hauteur de ce pied de page, ce que pose problème si son contenu évolue ou simplement si l'utilisateur change de fonte ou en modifie la taille avec le zoom.
Ma question, cette fois, est alors : est-il possible, à l'instar de certains toolkits IHM comme GTK ou celui de Java, de définir des boîtes qui d'un côté s'adapteraient à leur contenu ou, de l'autre, utiliseraient l'espace restant disponible quand il est connu ?
Merci à tous.
