Site photos s'adaptant à toute les résolutions

Bonjour,

Je suis en train de réaliser mon site internet (sur mes photographies), et j'utilise les media queries pour qu'il s'adapte à toutes les résolutions. Le hic, c'est que ce n'est pas si simple, car j'aimerais afficher mes photos sur la droite de l'écran avec le menu sur la gauche, et il faut respecter les proportions des photos (10x15). Est-ce réalisable avec les media queries ? Ou faut-il passer par du flash (ce que j'aimerais éviter) comme dans cet exemple : http://www.jasonbellphoto.com/#/home/

D'avance merci pour vos réponse

Meilleures salutations

Christophe

Bonjour !

jazzchris a écrit :
Bonjour,

Je suis en train de réaliser mon site internet (sur mes photographies), et j'utilise les media queries pour qu'il s'adapte à toutes les résolutions. Le hic, c'est que ce n'est pas si simple, car j'aimerais afficher mes photos sur la droite de l'écran avec le menu sur la gauche, et il faut respecter les proportions des photos (10x15). Est-ce réalisable avec les media queries ? Ou faut-il passer par du flash (ce que j'aimerais éviter) comme dans cet exemple : http://www.jasonbellphoto.com/#/home/

Le flash ne marche pas chez moi, aucune idée de quoi a l'air votre site, l'autre lien (marqué HTML) n'a pas l'air de fonctionner.

Les media-queries s'utilisent plutôt pour une mise en page différente suivant la largeur de la page, pas vraiment pour que les images s'adaptent à la résolution de l'écran.

Les images sont des éléments (presque) comme les autres.


Modifié par Zelena (15 Jun 2016 - 12:10)

Bonjour,

Les media-queries vont vous servir à définir les emplacements (taille, position, ordre) des conteneurs mais pas pour agir directement sur les dimensions d'une image (à moins de passer les images en background - voir note).

Toutefois il existe un recours qui se gère au niveau du Html de part l'utilisation de l'attribut Srcset en combinaison avec Sizes qui permet de moduler entre différentes tailles.

Quelques liens ci après :
- OpenWeb - Adaptive Images et Responsive Web Design
- A List Apart - Using Responsive Images (Now) (en anglais)
- La Cascade - Images responsives : picture et srcset
- Matt Wilcox - Keeping srcset and sizes under control (en anglais)


L'ensemble media-queries et images adaptatives devrait permettre un résultat frôlant la perfection. Le tout uniquement en html/css.

Bonne journée.


Note : Les images placées en arrière plan (background) ne peuvent pas être référençées (ou alors il y a un truc dont je ne suis pas au courant), non accessibles donc (théoriquement) à n'utiliser que pour la déco.
Modifié par Greg_Lumiere (15 Jun 2016 - 12:26)

La mise en page est effectivement très simple. C'est avoir des images légères qui s'affichent bien sur tous les écrans qui est plus difficile.

vortex3 a écrit :
La mise en page est effectivement très simple. C'est avoir des images légères qui s'affichent bien sur tous les écrans qui est plus difficile.

Oui, j'avais galèré a obtenir un résultat probant avec les attributs srcset tantôt : Images.

Et encore, il s'agit ici d'un exemple statique, donc avec un html facile à configurer, quand il m'a fallu le porter sur WordPress, quel casse tête !