Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Image en responsive

  • Geoffroy
  • Geoffroy's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
7 years 2 months 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.
The topic has been locked.
  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #147683 by Nickko
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 ?

Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
More
7 years 2 months ago #147687 by Ben_V
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:
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
  • Geoffroy's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
7 years 2 months 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
The topic has been locked.
  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #147690 by Nickko
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.

Nickko
Head of ergonomics, UX & UI.
The topic has been locked.
More
7 years 2 months ago #147691 by Ben_V
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:
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
  • Geoffroy's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
7 years 2 months ago #147692 by Geoffroy
Replied by Geoffroy on topic Image en responsive
www.incidence.be/limesurvey/index.php/919584?lang=fr

J'utilise le modèle skeletonquest_flatblue
The topic has been locked.
  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago - 7 years 2 months ago #147693 by Nickko
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.

Nickko
Head of ergonomics, UX & UI.
Last edit: 7 years 2 months ago by Nickko.
The topic has been locked.
  • Geoffroy
  • Geoffroy's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
7 years 2 months 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
  • Nickko's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #147695 by Nickko
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.
More
7 years 2 months ago #147696 by Ben_V
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
  • Nickko's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #147699 by Nickko
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

Lime-years ahead

Online-surveys for every purse and purpose