Grande image

Nos appareils photo numériques nous permettent des images en différents formats, tous trop grands pour être affichés sans réduction sur nos pages de blogs.

Nous avons au moins 2 façons de les présenter dans un grand format, que le visiteur pourra déplacer sur son écran.

Mes images exemples font 5184px par 2920px.

- La première est celle que j'utilise le moins souvent: faire un lien sur l'image réduite pour l'afficher dans la même page, en grand format:

L'icône "Image" le fait simplement: vous choisissez la taille désirée pour votre article et cochez ouvrir l'image originale au clic (gauche) et cela vous donne ceci:

Comme vous le voyez en cliquant gauche sur cette image, elle s'affiche dans la même page mais pas en taille originale: pour l'afficher dans ce format, il vous faut cliquer droit sur l'image affichée/Afficher l'image: elle s'affiche dans un format intermédiaire et si vous cliquer gauche dessus, elle va s'afficher en format d'origine, toujours dans la même page.

Si vous cliquez droit sur l'image/ Ouvrir le lien dans un nouvel onglet, l'image va pouvoir être agrandie au clic (2) et dans une nouvelle page sans avoir à écrire de code en code source (<>)!

*****

J'aurais pu arrêter cette page à cette ligne mais j'étais parti sur quelque chose de plus compliqué et je laisse ce que j'ai écrit !

Un point que vous connaissez mieux que moi: pour afficher en plein écran, touche clavier F11 et retour par la même touche.

Si vos images sont hébergées sans lien vers l'originale, vous aurez seulement ces choix:

Ce qui signifie qu'il suffit d'un clic droit sur une image/afficher l'image ou un clic droit/afficher l'image de fond sur une image placée en fond de cadre pour l'afficher, dans la même page, en grand format et pouvoir la zoomer. exemple:

Image de gauche normale et image de droite en fond.

*****

Le fait  qu'elle s'affiche dans la même page oblige à revenir en arrière pour retrouver l'article: je ne trouve pas ça pratique.

Si vous voulez que l'affichage se fasse dans une nouvelle page, vous pouvez ouvrir le code source(<>) et modifier le code de l'image; le mien est:

<p style="text-align: center;"><a href="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs.jpg"><img src="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs@1152x649.jpg" alt="Grande image" /></a></p>

Pour que le lien ouvre une nouvelle page, il suffit d'ajouter target="blank" comme ainsi:

<p style="text-align: center;"><a href="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs.jpg" target="blank"><img src="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs@1152x649.jpg" alt="Grande image" /></a></p>

*****

La seconde façon nécessite de savoir héberger et récupérer l'adresse de votre image, sur Ekla ou ailleurs et de la placer dans un cadre à la dimension souhaitée.

Votre image sera plus grande que le cadre et le code fera apparaître des curseurs( latéral et inférieur) qui vous permet de déplacer l'image dans le cadre: exemple:

<div id="aut">
<p id="pan">&nbsp;</p>
</div>
<style><!--
#aut{position:relative; width: 60vw; height: 33.75vw; border:0.2vh solid grey; margin: 1vh auto; overflow:auto;}
#pan{width:240vw; height:135vw; background:url('http://ekladata.com/UVdKUmkInbw3f1KRmLcR2r1yyMw.jpg'); background-size:240vw 135vw;}
--></style>

Par défaut, l'image sera positionnée par rapport à son angle haut/gauche.

Sur ce dernier montage, si vous faites clic droit sur l'image/afficher l'image de fond, vous l'afficherez, dans la même page en format intermédiaire à agrandir par un autre clic pour l'afficher en taille originale: plusieurs possibilités, donc !