Image responsive sur mon site

Re : Image responsive sur mon site

Merci

[lomart]

Re : Image responsive sur mon site

Du coup la meilleure solution reste le span 3 ? mais euh ... pardon, mais du coup il faut mettre
<div span 3>
Lien de l'image width="x%" height="NaN"
</div span 3>

Non
<div class="span3">
<img src="" alt="">
</div>

Pour le texte je vais voir, peut être qu'en changeant le thème ça améliorera les choses

J'en doute, une ligne avec 2 ou 3 mots aura toujours 2 ou 3 mots. Avec une autre police, cela peut donner l'impression d'arranger les choses, mais ce ne sera qu'une impression.

Re : Image responsive sur mon site

Ah oui en effet avec le width="x%" height="NaN", ça passe déjà beaucoup mieux, quoique sur smartphone les images sont beaucoup trop petites ... si je les grossis, elle vont être énormes sur l'ordi ..

Du coup la meilleure solution reste le span 3 ? mais euh ... pardon, mais du coup il faut mettre
<div span 3>
Lien de l'image width="x%" height="NaN"
</div span 3>
?

Pour le texte je vais voir, peut être qu'en changeant le thème ça améliorera les choses

[lomart]

Re : Image responsive sur mon site

Alors du coup le mieux serait d'importer dans le dossier images les images déjà dimensionnées comme je le souhaite ?
Parce que j'ai "forcé" les dimensions justement parce que les images importées sont plus grandes que ce que je voudrais ...

Il faut des images d'une taille égale à leur plus grande utilisation. exemple 960px si l'image occupe la largeur d'une grille de 960px sur ordinateur.
Ensuite, on contrôle la taille de l'image en pourcentage de la largeur du conteneur parent. Si l'on veut que l'image occupe 25% de la largeur totale, 2 possibilités:
1 - lui mettre un attribut width="25%" height="NaN". L'image fera toujours 25% de la largeur de l'écran sur un ordi comme un smartphone
2 - la mettre dans une div de classe span3. L'image fera 100% de la largeur du span3 qui lui fait 25% de la largeur totale. Sur smartphone, un span3 fera 100% de la largeur de l'écran ... et l'image aussi.

Et quid de la justification ? C'est ça qui donne le texte avec des espaces énormes entre les mots ?

Le problème d'un texte justifié gauche-droite est que si l'aspect est correct sur des lignes longues avec beaucoup de mots, elle est souvent impraticable sur des lignes avec seulement 2 ou 3 mots. L'image n'a rien à voir dans ce problème, si ce n'est de diminuer la place allouée au texte. Une solution est de définir par mediaqueries, une justification gauche sur les petits écrans.

Re : Image responsive sur mon site

Bonjour et merci de ton aide.
Alors du coup le mieux serait d'importer dans le dossier images les images déjà dimensionnées comme je le souhaite ?
Parce que j'ai "forcé" les dimensions justement parce que les images importées sont plus grandes que ce que je voudrais ...

Et quid de la justification ? C'est ça qui donne le texte avec des espaces énormes entre les mots ?

[lomart]

Re : Image responsive sur mon site

Salut,

Pour la dernière image de Histoire, c'est un peu normal au vu des styles inline de la balise IMG

style="width: 518px; height: 389px; float: center; border-width: 1px; border-style: solid; margin: 5px auto; display: block;"

Comme la largeur de l'image est de 100% maxi par les règles CSS générales, il faut que la hauteur ne soit pas forcée. Pour cela 2 solutions: ne rien mettre ou définir les tailles de l'image avec width="100%" height="NaN". NaN est l'acronyme de Not A Number qui fait que la valeur, bien qu'argumentée pour les analyseurs de code comme gtMetrix, ne sera pas prise en compte.

Les autres propriétés CSS inline gagnerait à être mise dans la règle générale pour la balise IMG.
En évitant la propriété "float:center" qui n'existe pas

Le code serait donc:
<img alt="Le Bâtiment vu du parc" src="/newschola/images/photos/exterieur_parc.JPG" width="100%" height="NaN">

Re : Image responsive sur mon site

Regarde la dernière image dans la page "histoire" elle est toute compressée
Et le texte à côté des images qui est tout bizarre aussi je l'ai justifié car à mon sens plus agréable à lire mais à vrai dire je ne connais pas la norme sur internet ...

[ghazal]

Re : Image responsive sur mon site

Sur mon iPhone et sur les pages indiquées, je ne vois pas de souci avec les images.
Petit truc:
sur Firefox, faire command + alt + M pour voir rapidement une fenêtre en dimension responsive (smartphone ou tablette, à régler).

Evidemment, le template Everest de yootheme a un look beaucoup moins austère (et plus "moderne") que celui de Icetheme.
La prise en main des templates yootheme prend un peu de temps (mettre la main sur toute la doc que tu peux trouver ... et la lire) mais ces derniers suivent une logique assez intuitive.

Re : Image responsive sur mon site

Bonjour à vous et merci de votre réponse
En fait l'adresse du site est www.schola-cantorum.com/newschola
Le template utilisé est Black&White2 de Icetheme mais ce n'est pas définitif je pense mettre le Everest de Yootheme que je trouve très sympa ..
Regardez sur un mobile ça fait naze avec les quelques images que j'ai mis (Accueil et Histoire). Voyez aussi avec les tables (Disciplines) ça fait bizarre

Merci de votre aide !!

[fabber18]

Re : Image responsive sur mon site

ha ok ok, bon a savoir, merci !

[ghazal]

Re : Image responsive sur mon site

@Gigab
Quel est le template utilisé ?
A priori, un très gros pourcentage des templates pour joomla 3 est responsive.
Responsiv(ité) qui s'applique aux images.
Es-tu sûr que tu as bien vérifié tous les paramétrages de ton template ?

La définition CSS3 basique d'une image responsive est :

img {
width: auto;
max-width: 100%;
height: auto;
}

Exemple : http://ghazal.github.io/basic-responsive-image.html (regarder la source)

@fabber18
C'est toujours une assez mauvaise idée de coller une définition CSS en inline.

[fabber18]

Re : Image responsive sur mon site

Lampadaire ! ( ou bonjour )

Je suis aussi entrain d’apprendre à faire du responsive design et c' est pas si compliqué que ca :

1- il faut que ton template soit responsive : par exemple sur une plateforme portable il faut que le corp de la page web fasse un régime ... pour rentrer aux proportions de la définition du petit téléphone portable.

2 - perso, une foie la première partie remplie, je vais toucher au code, bien souvent les image c' est du HTML, et c' est codé de la sorte :

<img src="lien_de_ma_supper_image" alt="commentaire_de_l'image" />

pour qu'elle s'ajuste à la taille du bloc dans lequelle elle va devoir se loger ( sans débordée ) je fait

<img src="lien_de_ma_supper_image" alt="commentaire_de_l'image" width="100%"/>

Par contre dans la largeur, elle couvrir toute la largeur de la page web, mais elle s'adaptera si le Template réduira le warpper ( ou le corp de la page web )

Ensuite pour ton problème d'espace, là ca peut soit venir du template, ou de la justification!


Après là je travail sur mon premier template joomla, et je suis stagiaire, donc je fait principalement du café ....

Bon courage !

Bonjour, je ne sais pas si c'est la bonne place pour ce sujet désolé par avance ...

Voilà je suis en train de finaliser le site de ma société (conservatoire de musique) et je dois ajouter pas mal de photos .. le seul souci c'est que lorsque je les ajoute elles ne sont pas (ou peu) responsive.
Je m'explique : lorsqu'on regarde sur un écran d'ordinateur, tout semble correct, seulement à partir du moment où je regarde sur un téléphone, soit elles sont compressées et perdent toute cohérence visuelle, soit elles sont trop importantes.

Sur ces derniers points, lorsque du texte entoure ces photos, je me retrouve sur l'écran du téléphone avec des mots
e s p a c é s c o m m e ç a, ce qui n'est pas très agréable à la lecture

Pouvez vous m'aider ? Comment résoudre le souci ?
Un grand merci par avance !!