Image responsive sur mon site

**fabber18** · 19/05/2014, 15h12

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 :

Code HTML:

<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

Code HTML:

<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 !

**ghazal** · 20/05/2014, 11h11

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** · 20/05/2014, 13h05

Re : Image responsive sur mon site

ha ok ok, bon a savoir, merci !

**Visiteur** · 20/05/2014, 13h14

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 !!

**ghazal** · 20/05/2014, 19h30

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.

**Visiteur** · 20/05/2014, 21h30

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 ...

**lomart** · 21/05/2014, 06h49

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">

**Visiteur** · 21/05/2014, 11h01

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** · 21/05/2014, 11h26

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.

**Visiteur** · 21/05/2014, 20h44

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** · 21/05/2014, 21h13

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.

**Visiteur** · 22/05/2014, 11h24

Re : Image responsive sur mon site

Merci

Image responsive sur mon site

Image responsive sur mon site

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association