Afficher des images sur toute la largeur de l'écran

obtenir ces boutons

Afficher des images sur toute la largeur de l'écran

Des images de grande taille ne peuvent s'afficher dans le message d'un blog, en raison de la largeur limitée des messages, à cause de la présence d'une ou plusieurs barres(s) latérale(s).

Les visiteurs n'ont alors que la possibilité de cliquer sur chaque image individuellement pour l'agrandir.

Or, il est possible d'UTILISER TOUTE LA LARGEUR DE L’ÉCRAN pour afficher des images se trouvant dans un message ou une "page statique" (terminologie utilisée par Blogger pour ses "messages autonomes").

Pour cela, rien de plus simple. Il suffit d'ajouter dans la version HTML du message ou de la "page statique", le code suivant :

<style type="text/css">#left-sidebar{display:none;}#outer-wrapper {width: 100%;}#main{width:100%;}</style>

Cela :
- supprime temporairement la barre latérale gauche ;
- supprime les espaces vides à gauche et à droite ;
- augmente la largeur du message ou de la "page".

CELA A ÉTÉ RÉALISÉ SUR LA PAGE SUIVANTE.

Le nom de la barre latérale ("left-sidebar") peut différer d'un blog à l'autre. Il faut le modifier. On peut ajouter la même instruction concernant la ou les autres barres latérales. Si l'image est un peu trop large, il suffit de réduire "width:100%;" : par exemple : "width:90%;".

13 commentaires:

Les Folies de Magalie a dit…

Bonjour,
il faut ajouter le code que vous proposé dans la partie "modifier le code HTML du message"?Si oui,en début ou à la fin de tous les codes?Car je viens de le mettre tout au début et il n'y a aucun changement.
merci

Meiser a dit…

L'endroit dans le message n'a pas d'importance.

Mais les noms des éléments peuvent être différents d'un template à l'autre.

Rechercher ces noms à la fin du template sans avoir coché la case "Développer les modèles de gadgets".


Album vénitien a dit…

je viens de changer l'image de ma bannière et elle ne s 'affiche plus sur toute la largeur de ma page...comment puis-je rétablir ma bannière en pleine largeur Grand MERCI
voir ici :http://commeunvoldepapillon.blogspot.com/

Meiser a dit…

Bonjour.

On peut corriger la hauteur (302) et la largeur (728):

<img alt='Comme un vol de papillon' height='302px; ' id='Header1_headerimg' src='http://2.bp.blogspot.com/-th3tmK9sUY0/T0ZGPCSdoMI/AAAAAAAAVYY/c6_0EYut-JA/s728/perce%2Bneige%2Bbandeaupapillonok.jpg' style='display: block' width='728px; '/>


Album vénitien a dit…

Un grand MERCI à vous!

lilipop couture a dit…

Bonjour,
j'ai cree un faux blog pour faire des tests avant de modifier mon vrai blog. J'essaie d'obtenir la meme largeur pour mes photos en format paysage et portrait.
J'ai essaye de modifier le CSS comme suit:
.post img {min-width:700px;} ce qui me donne la meme largeur. Par contre la hauteur de ma photo en format portrait n'est plus proportionnelle.
J'aimerais faire cette modif sur l'ensemble de mon blog et non sur une image en particulier.

Pouvez-vous m'aider?
Liz

Meiser a dit…

Bonjour.

Supprimer "height:..." et cela se fera automatiquement.


lilipop couture a dit…

Merci pour votre reponse, je n'ai pas trouve height alors j'ai ajoute cette ligne
.post img {height:auto;}
et ca marche

Mamachic Andberries a dit…

Bonjour, Merci pour cet article. J'aurai souhaité procéder à la correction de la taille de mes images mais j'ai remarqué que je n'ai pas les indications width ni height dans le code html de mon article. Savez vous comment y rémédier? Merci

Meiser a dit…


Bonjour.

Si ces mentions (facultatives) sont absentes, l'image s'affiche avec ses dimensions d'origine.

Pour les modifier, il suffit d'ajouter ces instructions.


B a dit…
Ce commentaire a été supprimé par l'auteur.
B a dit…

Merci, j'ajouterai donc ces instructions mais dois je le faire dans le code html de l'article ou dans le modèle de la page? Et à quel endroit exactement svp? En début de page? À la fin? Après un code en particulier? Merci infiniment. Bee

Meiser a dit…


Bonjour.

Il faut les ajouter dans l'instruction d'affichage de l'image qui commence par "<img ..."