Maronniers CSS : image resizing et boîtes auto-développantes

**Obsidian** · 11/11/2013, 18h45

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.

**rodolphebrd** · 11/11/2013, 21h07

Pour les images : Les fondamentaux du Responsive Web Design.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img{
  max-width: 100% ;
  height: auto ;
  box-sizing: border-box; /* optionnel */
}

Pour le footer c'est dans la faq

**Obsidian** · 12/11/2013, 01h20

Bonjour,

Merci pour ta réponse mais elle ne répond pas à ma problématique (ou alors, il y a quelque chose qui m'a échappé). J'ai bien sûr consulté ces deux documents et tu verras que je fais déjà état de width: 100%; height: auto; dans mon premier point mais, même avec max-width, le problème est que mon image suit les limites gauche et droite mais pas hautes et basses : si je rétrécis la fenêtre du navigateur en remontant sa bordure basse, l'image conserve ses dimensions et j'obtiens une barre de défilement, ce qui n'est pas ce que je cherche.

D'autre part, j'aimerais en plus laisser l'image occuper tout l'espace disponible jusqu'à ce qu'elle atteigne sa résolution nominale (donc, ici, une largeur de 1024 pixels), et qu'elle s'y tienne au delà. Ça marche bien avec width: 100%; max-width: 1024px;. Si j'ai besoin de cette dernière clause pour arriver mes fins, je peux me débrouiller avec des containers supplémentaires, mais je n'arrive pas à voir dans quelle mesure ça peut m'aider dans l'immédiat.

Pour le moment, je m'en suis sorti avec du Javascript, mais j'aimerais bien pouvoir m'en passer.

Même chose pour le pied de page : la FAQ le crée de la même façon que je le fais dans mon second point, c'est-à-dire en le positionnant en absolu en bas de page et en appliquant un padding au container qui le précède. Le problème est que cela impose une hauteur fixe au pied de page (6em dans la FAQ), taille qui peut être dépassée soit si le contenu change, soit si l'utilisateur modifie la taille de la fonte (avec le zoom ou des options personnalisées), soit encore si l'utilisateur redimensionne sa fenêtre : un pied de page qui tient sur une ligne en plein écran va forcément en occuper plusieurs en le rétrécissant, ce qui est particulièrement flagrant sur un smartphone, spécialement quand on le tient en mode portrait et qu'on le bascule en paysage, ou vice et versa.

EDIT : j'ajoute que ce modèle pose problème quand on combine les deux problématiques car avec une photo et un positionnement en absolute du pied de page (donc par nature sorti du flux normal), lorsque l'écran se réduit en hauteur, le pied de page vient se superposer à ma photo, que je suis obligé de clipper avec overflow: hidden. Ça résout partiellement le problème du pied de page, mais pas celui de la photo.

**rodolphebrd** · 12/11/2013, 11h09

1- Pour les images pourrais-tu poster ton code (avec un codepen) pour qu'on travaille dessus.
Il y a plusieurs solutions : média queries, plusieurs tailles d'images, etc.

2- Concernant le sticky footer : j'utilise cette méthode.
Par contre ne pas fixer de hauteur au footer, je ne crois pas que ça soit possible.
J'utilise les média queries pour les différents types de supports.

**Obsidian** · 12/11/2013, 12h10

Merci de t'intéresser à mon cas !

Envoyé par rodolphebrd

1- Pour les images pourrais-tu poster ton code (avec un codepen) pour qu'on travaille dessus.
Il y a plusieurs solutions : média queries, plusieurs tailles d'images, etc.

Pour l'instant, je n'ai que des bribes. Le temps de les mettre un peu en forme et je les poste. Ce n'est pas bête, les media-queries : j'ai envisagé de les utiliser pour d'autres cas à résoudre et je n'ai pas pensé à voir si ça pouvait être utile dans ce cas précis…

2- Concernant le sticky footer : j'utilise cette méthode.
Par contre ne pas fixer de hauteur au footer, je ne crois pas que ça soit possible.
J'utilise les média queries pour les différents types de supports.

C'est ce que je craignais, effectivement. Tout le monde les implémente de la même façon.

Il n'y donc pas moyen non plus de faire des boîtes auto-expansives : on peut faire quelque chose d'approché horizontalement avec des float de part et d'autre et avec une hauteur de 100 %, mais pas verticalement. :-( Dans CSS 4, peut-être…

**rodolphebrd** · 12/11/2013, 12h57

Pour les images cet article est pas mal : http://mobile.smashingmagazine.com/2...s-backgrounds/

Sinon vois comment tu peux développer ton idée autour de ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="http://lorempixel.com/600/450/" class="ri" />

Une version de CSS avec une image centrée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
img.ri
{
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

http://codepen.io/anon/pen/hlsbH

Maronniers CSS : image resizing et boîtes auto-développantes

CSS

Vue hybride

Discussions similaires

Partager

Partager