- Posts: 88
- Thank you received: 1
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Image en responsive
- Geoffroy
- Topic Author
- Offline
- Premium Member
Less
More
7 years 1 month ago #147681
by Geoffroy
Image en responsive was created by Geoffroy
Bonjour,
J'ai fait un questionnaire avec des images dans l'intro et dans les descriptif de groupe (une sorte de banner reprenant des logos).
Si tout fonctionne bien sur un écran d'ordinateur lorsque je tente de répondre sur un téléphone mes images sont toutes déformées (le ratio hauteur/largeur n'est pas respecté).
Comment peut-on forcer le respect du ration hauteur/largeur ?
Je précise que j'utilise la version 2.06+ Build 151109.
J'ai fait un questionnaire avec des images dans l'intro et dans les descriptif de groupe (une sorte de banner reprenant des logos).
Si tout fonctionne bien sur un écran d'ordinateur lorsque je tente de répondre sur un téléphone mes images sont toutes déformées (le ratio hauteur/largeur n'est pas respecté).
Comment peut-on forcer le respect du ration hauteur/largeur ?
Je précise que j'utilise la version 2.06+ Build 151109.
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1957
- Thank you received: 411
7 years 1 month ago #147683
by Nickko
Nickko
Head of ergonomics, UX & UI.
Replied by Nickko on topic Image en responsive
Normalement il n'y a rien à faire. Tu les a inséré comment tes images ?
Tu aurais un exemple, une copie d'écran ou autre ?
Tu aurais un exemple, une copie d'écran ou autre ?
Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1223
- Thank you received: 351
7 years 1 month ago #147687
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Image en responsive
Salut,
essaie de rajouter qqpart (le mieux est à la fin de ton fichier template.css) ce code css:
essaie de rajouter qqpart (le mieux est à la fin de ton fichier template.css) ce code css:
Code:
img {height:auto !important}
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
- Geoffroy
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 88
- Thank you received: 1
7 years 1 month ago #147688
by Geoffroy
Replied by Geoffroy on topic Image en responsive
En fait je crée une image de +/- 800 px de large sur 80 de haut (pour faire une banner avec un logo à droite et un logo à gauche). Lorsque je passe sur un écran qui a une résolution inférieur à 800px (comme un smartphone), j'ai l'impression que la hauteur est conservée et que la largeur est simplement réduite.
L'ajout de img {height:auto !important} dans le css ne donne pas de résultats
L'ajout de img {height:auto !important} dans le css ne donne pas de résultats
Attachments:
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1957
- Thank you received: 411
7 years 1 month ago #147690
by Nickko
Nickko
Head of ergonomics, UX & UI.
Replied by Nickko on topic Image en responsive
Oui mais concrètement tu as fais comment pour mettre ton image ds le sondage ?
Le comportement que tu décrits ressemble à l'utilisation d'une image de background dans un composant pas prévu pour faire une entête ainsi.
Quel thème utilises-tu ?
Je pense que si tu nous donnais un lien pour voir ce que ça donne et jeter un œil au code source on pourrait t'aider plus efficacement.
Nicolas G.
Le comportement que tu décrits ressemble à l'utilisation d'une image de background dans un composant pas prévu pour faire une entête ainsi.
Quel thème utilises-tu ?
Je pense que si tu nous donnais un lien pour voir ce que ça donne et jeter un œil au code source on pourrait t'aider plus efficacement.
Nicolas G.
Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1223
- Thank you received: 351
7 years 1 month ago #147691
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Image en responsive
en ces cas là c'est peut-être plus simple d'utiliser plusieurs images et de jouer un peu du html et css (@media)
genre:
genre:
Code:
<img class="desktop nophone" src="banner.jpg" ></img><img class="phone" src="banner_phone.jpg" ></img>
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
- Geoffroy
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 88
- Thank you received: 1
7 years 1 month ago #147692
by Geoffroy
Replied by Geoffroy on topic Image en responsive
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1957
- Thank you received: 411
7 years 1 month ago - 7 years 1 month ago #147693
by Nickko
Nickko
Head of ergonomics, UX & UI.
Replied by Nickko on topic Image en responsive
Ce modèle me semble créé par Denis, si on ne trouve pas de solution, il devrait passer ici de temps en temps, il pourra sans doute t'aider également.
Bon, en fait c'est bien une image déjà.
Si tu retires la hauteur de la balise image, alors l'entête d'adapte à la largeur sans se déformer.
C'est bien ce que tu veux ?
Est-ce que tu as toi même indiqué la hauteur quelque part ?
Sinon, je pense que c'est dans la fenêtre ou tu upload l'image, tu dois avoir un onglet ou une zone avec la taille de l'image.
Je ne suis pas bien sûr, je ne fais pas la manip très souvent.
Bon, en fait c'est bien une image déjà.
Si tu retires la hauteur de la balise image, alors l'entête d'adapte à la largeur sans se déformer.
C'est bien ce que tu veux ?
Est-ce que tu as toi même indiqué la hauteur quelque part ?
Sinon, je pense que c'est dans la fenêtre ou tu upload l'image, tu dois avoir un onglet ou une zone avec la taille de l'image.
Je ne suis pas bien sûr, je ne fais pas la manip très souvent.
Nickko
Head of ergonomics, UX & UI.
Last edit: 7 years 1 month ago by Nickko.
The topic has been locked.
- Geoffroy
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 88
- Thank you received: 1
7 years 1 month ago #147694
by Geoffroy
Replied by Geoffroy on topic Image en responsive
Effectivement c'est Denis qui l'a créé (et c'est lui qui ma donné cette méthode pour l'ajout de logos)
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1957
- Thank you received: 411
7 years 1 month ago #147695
by Nickko
Nickko
Head of ergonomics, UX & UI.
Replied by Nickko on topic Image en responsive
Pardon, j'étais en train d'ajouter des infos dans mon précédent message lorsque tu as posté le tien.
Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
- Ben_V
- Offline
- Platinum Member
Less
More
- Posts: 1223
- Thank you received: 351
7 years 1 month ago #147696
by Ben_V
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Replied by Ben_V on topic Image en responsive
chez moi ça s'affiche très correctement (avec un petit écran 360px)
Benoît
EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1957
- Thank you received: 411
7 years 1 month ago #147699
by Nickko
Nickko
Head of ergonomics, UX & UI.
Replied by Nickko on topic Image en responsive
Tu utilises quel navigateur. Moi j'ai chrome sur Mac et j'arrive à reproduire le problème.
Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
Moderators: Nickko